CSS中的重叠圆圈与1个div

Question

我希望在 CSS 中创建这种重叠的圆形：

基本上，只是堆叠的圆圈。我环顾四周，我看到的所有解决方案都包括使用多个 div 元素来实现这种效果。但是，这不能使用 CSS3 用单个 div 完成吗？我查看了它是如何轻松完成的，并认为如果所有颜色都相同，您将拥有这样的药丸形状：

http://jsfiddle.net/5wytm0r4/

 #circles {
   background-color: red;
   width: 130px;
   height: 100px;
   border-radius: 50px;
 }

<div id="circles"></div>

然后简单地在里面画几个四分之一月，你就完成了。但是，我不知道如何在我的胶囊形 div 中绘制这些月亮形状。

Answer 1

您可以通过 ::before 和::after 之类的伪选择器来实现这一点，您可以找到 jsfiddle https://jsfiddle.net/zakirshaik/jL78m9d1/6/。

您可以在代码中添加阴影以增加圆圈的数量。

.circle-overlaping{
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  position:relative;
}

.circle-overlaping::before{
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  background-color: yellow;
  width: 100px;
  height:100px;
  border-radius: 50%;
}

.circle-overlaping::after{
  content: '';
  position: absolute;
  top: 0;
  left: 40px;
  background-color: blue;
  width: 100px;
  height:100px;
  border-radius: 50%;
}

<div class="circle-overlaping">

</div>

Answer 2

使用 CSS 盒子阴影

您可以在圆形 div 上使用多个带有多种颜色的 box-shadows。它们需要用逗号分隔：

#circles {
  background-color: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 10px 0 0 -2px #f8ff00,
              20px 0 0 -4px #009901,
              30px 0 0 -6px #3531ff;
}

<div id="circles"></div>

输出：

对 box-shadows 的浏览器支持是 IE9+（更多信息请参见 canIuse）

---

您也可以使用 vw units 使重叠的圆圈形状 responsive 根据视口的宽度：DEMO

#circles {
  background-color: red;
  width: 20vw;
  height: 20vw;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 2vw 0 0 -0.4vw #f8ff00, 
              4vw 0 0 -0.8vw #009901, 
              6vw 0 0 -1.2vw #3531ff;
}

<div id="circles"></div>

对大众单位的浏览器支持是 IE9+（更多信息请参阅canIuse）

---

使用 SVG

另一种方法是使用带有<circle> 元素的inline svg。
这是根据父级和browser support goes back to IE9 的大小来响应的，例如 box-shadows ：

svg{width:80%;}

<svg viewbox="0 0 100 30">  
  <circle cx="59" cy="15" r="8.5" fill="darkorange" />
  <circle cx="56" cy="15" r="9" fill="gold" />
  <circle cx="53" cy="15" r="9.5" fill="tomato" />
  <circle cx="50" cy="15" r="10" fill="teal" />
</svg>

我还在 SVG 版本上进行了扩展，以制作具有更多重叠圆圈的动画“蠕虫”。你可以在这支笔中看到它：animated worm

它看起来像这样：

Answer 3

CSS3 multiple background images 和radial gradients 可以一起使用：

#circles {
  width: 115px;
  height: 100px;
  background-image:
    radial-gradient(circle at 50px 50px, #F00 0, #F00 50px, transparent 50px),
    radial-gradient(circle at 55px 50px, #FF0 0, #FF0 50px, transparent 50px),
    radial-gradient(circle at 60px 50px, #080 0, #080 50px, transparent 50px),
    radial-gradient(circle at 65px 50px, #00F 0, #00F 50px, transparent 50px);
}

<div id="circles"></div>

Answer 4

或者，如果你觉得很疯狂，你可以制作一个 svg 并将其内联用作背景图片：

#circles {
  width: 120px;
  height: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle fill='blue'  cy='50' cx='70' r='50' /><circle fill='green'  cy='50' cx='65' r='50' /><circle fill='yellow'  cy='50' cx='60' r='50' /><circle fill='red'  cy='50' cx='55' r='50' /></svg>");
}

<div id="circles"></div>