在CSS中与1 div重叠的圆圈 [英] Overlapping circles in CSS with 1 div

问题描述

我想在CSS中创建这种重叠的圆形形状：

基本上，只是堆叠的圆。我已经看过，我看到的所有解决方案包括使用多个div元素的效果。然而，不能这样做与单个div，使用CSS3？我看了看它是如何容易做，并认为，如果所有的颜色是一样的，你会有一个药丸形状像这样：

）

---

您也可以使用

I'm looking to create this overlapping circles shape in CSS:

Basically, just stacked circles. I've looked around, and all solutions I see include using multiple div elements for this effect. However, can't this be done with a single div, using CSS3? I looked at how it could be easily done, and figured that, if all colours are the same, you'd have a pill shape like this:

http://jsfiddle.net/5wytm0r4/

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

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

And then simply draw a couple of quarter moons in it, and you're done. However, I can't figure out how to draw these moon shapes in my capsule shaped div.

解决方案

With CSS box-shadows

You can use multiple box-shadows with several colours on a rounded div. They need to be seperated by a comma:

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

output :

Browser support for box-shadows is IE9+ (for more info see canIuse)

---

You can also make the overlapping circles shape responsive according to the width of the viewport with vw units : 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>

Browser support for vw units is IE9+ (for more info see canIuse)

---

With SVG

Another approach would be to use an inline svg with the <circle> element.
This is responsive according to the size of the parent and browser support goes back to IE9 like 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>

I also expanded on the SVG version to make an animated "worm" with more overlapping circles. You can see it in this pen : animated worm

And it looks like this :

这篇关于在CSS中与1 div重叠的圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！