纯css3如何实现两个折叠的圆圈？

【问题标题】：How to realize two collapsing circles in pure css3?纯css3如何实现两个折叠的圆圈？
【发布时间】：2016-07-09 07:09:51
【问题描述】：

我需要做的是如下图：

我根本不想使用 SVG。我认为这是两个边界半径为 50% 的 div。但是我如何像在图像上一样合并它们？你能解决这个问题或者给个建议吗？

【问题讨论】：

标签： html css frontend figures

【解决方案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>

【讨论】：