Círculos superpuestos en CSS con 1 div

Question 1

Estoy buscando crear esta forma de círculos superpuestos en CSS:

Forma deseada de ciclos superpuestos

Básicamente, solo círculos apilados. Miré a mi alrededor y todas las soluciones que veo incluyen el uso de múltiples elementos div para este efecto. Sin embargo, ¿no se puede hacer esto con un solo div, usando CSS3? Observé cómo se podía hacer fácilmente y pensé que, si todos los colores son iguales, tendrías una forma de pastilla como esta:

http://jsfiddle.net/5wytm0r4/

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

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

Y luego simplemente dibuje un par de cuartos de luna en él, y listo. Sin embargo, no puedo entender cómo dibujar estas formas de luna en mi div en forma de cápsula.

Question 2

Con sombras de cuadro CSS

Puedes usar múltiples caja-sombras con varios colores en un div redondeado. Deben estar separados por una coma:

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

producción :

CSS o círculos superpuestos

El soporte del navegador para box-shadows es IE9+ (para obtener más información, consulte Puedo usar)

También puedes hacer que los círculos superpuestos formen sensible de acuerdo con el ancho de la ventana gráfica con unidades vw : MANIFESTACIÓN

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

El navegador compatible con las unidades vw es IE9+ (para más información, consulte Puedo usar)

con SVG

Otro enfoque sería utilizar un svg en línea con el <circle> elemento.
Esto responde de acuerdo con el tamaño del padre y el soporte del navegador vuelve a IE9 como 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>

También amplié la versión SVG para hacer un “gusano” animado con más círculos superpuestos. Puedes verlo en este bolígrafo: gusano animado

Y se ve así:

Question 3

Es posible usar CSS3 múltiples imágenes de fondo y gradientes radiales juntos:

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

Question 4

O, si te sientes loco, puedes hacer un svg y usarlo en línea como imagen de fondo:

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

Con sombras de cuadro CSS

con SVG

¿Ha sido útil esta solución?