Question

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

Desired overlapping cicles shape

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

＆＃13;

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

＆＃13;

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

＆＃13;

然后简单地画出几个四分之一的卫星，你就完成了。但是，我无法弄清楚如何在我的胶囊形状的div中绘制这些月亮形状。

Answer 1

使用CSS box-shadows

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

＆＃13;

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

＆＃13;

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

＆＃13;

输出：

CSS orvelapping circles

框阴影的浏览器支持是IE9 +（有关详细信息，请参阅canIuse）

您还可以根据视口的宽度使重叠圆形响应 vw units ： DEMO

＆＃13;
＆＃13;
#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; }
＆＃13;
<div id="circles"></div>
＆＃13;
＆＃13;
＆＃13;

对vw单元的浏览器支持是IE9 +（有关详细信息，请参阅canIuse）

使用SVG

另一种方法是使用带有<circle>元素的内联svg 。
这是根据父级的大小和browser support goes back to IE9类似的盒子阴影响应：

＆＃13;
＆＃13;
svg{width:80%;}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

我还扩展了SVG版本，以制作动画＆＃34;蠕虫＆＃34;更多重叠的圆圈。您可以在此笔中看到它：animated worm

它看起来像这样：

Answer 2

可以同时使用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 3

或者，如果您感到疯狂，可以制作一个svg并将其作为背景图像内联使用：

＆＃13;

#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>");
}

＆＃13;

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

＆＃13;

Answer 4

您可以通过::: 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>

在CSS中使用1 div重叠圆圈

4 个答案:

使用CSS box-shadows

使用SVG