CSS中的重叠圆圈与1个div

Posted 2023-03-06

【中文标题】CSS中的重叠圆圈与1个div

【英文标题】：Overlapping circles in CSS with 1 div

【发布时间】：2015-02-03 12:48:30

【问题描述】：

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

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

http://jsfiddle.net/5wytm0r4/

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

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

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

【问题讨论】：

出于兴趣，为什么使用 5000px 作为边框半径而不是 50px（或 50%）？

【参考方案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>

【参考方案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 ：

svgwidth: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

它看起来像这样：

【讨论】：

@imdabestmanideedeet 你不是要这么做吗jsfiddle.net/webtiki/5wytm0r4/4 ？

我的错，我的意思是发布你刚刚发布的网址。谢谢！我会删除冒犯性的评论。对于阅读此内容的其他人：上面的 JSfiddle 使所有圆圈大小相等，而不是像答案中那样略小。

@imdabestmanideedeet 在我之前的评论中发布的小提琴中，圆圈宽了 2px。对于相同大小的圆圈，您需要这样做：jsfiddle.net/webtiki/5wytm0r4/8

哦，vw 单位，我现在有我的周末研究:)。

@TomHart 尽管有一些限制，但它们非常有趣。另请查看vh/vmin/vmax 单位！

【参考方案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>

【讨论】：

圆圈看起来不平滑。

【参考方案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>

【讨论】：

您需要对数据进行 URL 编码，否则可能无法正常工作（例如在 IE 中）。

您不必创建多个circle 标签。简单地使用use标签和transform它的X轴。

优点 - 为了便于阅读，我没有在 sn-p 中对 SVG 进行 URL 编码，但未来的读者应该知道，如果没有对 svg 进行 URL 编码，它将无法在 IE 中工作。跨度>

关于use 标签的好点子，感谢你教会了我一些新东西。令人惊讶的是，当使用 use 标记创建 SVG 代码时，它的代码会更长，但无论如何都可以在这里参考：<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><defs><circle cx='50' cy='50' id='circle' r='50'/></defs><use xlink:href='#circle' fill='blue' x='15' /><use xlink:href='#circle' fill='green' x='10' /><use xlink:href='#circle' fill='yellow' x='5' /><use xlink:href='#circle' fill='red' /></svg>