Overlap circles in CSS with 1 div

Question

I want to create this shape with overlapping circles in CSS:

In principle, circles are simply stacked. I looked around and all the solutions that I see include using multiple div elements for this effect. However, is it possible to do this with a single div using CSS3? I looked at how easy it is to do, and thought that if all the colors are the same, you will have this form of pills:

http://jsfiddle.net/5wytm0r4/

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

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

And then just draw a couple of quarters of the moon, and you're done. However, I cannot figure out how to draw these moon shapes in my capsule shape.

Answer 1

With CSS box-shadows

You can use multiple box-shadows with multiple colors on a rounded div. They must be separated 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 shadow boxes - IE9 + (see canIuse for more details)

---

You can also make overlapping circles 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 blocks - IE9 + (see canIuse for details )

---

With svg

Another approach would be to use the built-in svg with the <circle> element.
It depends on the size of the parent and browser support reverts to IE9 , for example 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 the SVG version to create an animated worm with more overlapping circles. You can see it in this pen: animated worm

And it looks like this:

Answer 2

You can use CSS3 multiple background images and radial gradients together:

 #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

Or, if you feel crazy, you can create svg and use it as a background image:

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