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/

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 :