html - 純粋なcss3で2つの崩壊する円を実現するには?

Question

私がする必要があるのは、下の画像です：

SVG はまったく使用したくありません。境界半径50％の2 divだと思います。しかし、どうすれば画像のようにマージできますか? これを解決するか、アドバイスをいただけますか？

Answer 1

これは最も簡単な方法です。必要に応じて改善できるかもしれません

#main {
  width: 80px;
  border-radius: 50%;
  height: 80px;
  border: 3px solid blue;
}

#background {
  background: grey;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

#small {
  background: grey;
  width: 30px;
  border-radius: 50%;
  height: 30px;
  border: 3px solid blue;
  margin-top: -30px;
  margin-left: 50px;
}

<div id="main">
  <div id="background"></div>
</div>
<div id="small"></div>