Overlapping circles in CSS with 1 div

Question

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.

Answer 1

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 :