Cercle de chevauchement en CSS avec 1 div

Je cherche à créer cette forme de cercles superposés en CSS:

Forme souhaitée de cicules se chevauchant

Fondamentalement, il suffit d’emstackr des cercles. J’ai regardé autour de moi et toutes les solutions que je vois incluent l’utilisation de plusieurs éléments div pour cet effet. Cependant, cela ne peut-il pas être fait avec un seul div, en utilisant CSS3? J’ai regardé comment cela pouvait être fait facilement et j’ai pensé que si toutes les couleurs étaient identiques, vous auriez une forme de pilule comme celle-ci:

http://jsfiddle.net/5wytm0r4/

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

Et puis dessinez simplement quelques quart de lune, et vous avez terminé. Cependant, je ne peux pas comprendre comment dessiner ces formes de lune dans mon div en forme de capsule.

Avec CSS box-shadows

Vous pouvez utiliser plusieurs ombres-boîtes avec plusieurs couleurs sur une division arrondie. Ils doivent être séparés par une virgule:

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

Il est possible d’utiliser plusieurs images d’arrière-plan et dégradés radiaux CSS3 :

 #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); }

Ou, si vous vous sentez fou, vous pouvez créer un svg et l’utiliser en ligne comme une image d’arrière-plan:

 #circles { width: 120px; height: 100px; background-image: url("data:image/svg+xml;utf8,"); }