在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

使用CSS框阴影

您可以在圆角div上使用多个具有多种颜色的框阴影.它们需要用逗号分隔:

#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>

输出:

浏览器对框阴影的支持是IE9 +(有关更多信息,请参阅canIuse)

您还可以根据具有vw单位的视口宽度使重叠圆形状响应: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>

浏览器对vw单元的支持是IE9 +(有关更多信息,请参阅canIuse)

随着SVG

另一种方法是使用带元素的内联svg<circle>.
这是根据父级的大小响应,浏览器支持回到IE9像盒子阴影:

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版本,制作了一个带有更多重叠圆圈的动画"蠕虫".你可以在这支笔中看到它:动画蠕虫

它看起来像这样:

Answer 2

可以将CSS3多个背景图像和径向渐变一起使用:

#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 3

或者,如果你感到疯狂,你可以制作一个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>