html - data - Círculos superpuestos en CSS con 1 div.

tooltip div jquery

Question

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

Básicamente, solo círculos apilados. He mirado 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? Miré cómo se podía hacer fácilmente y pensé que, si todos los colores son iguales, tendrías una forma de píldora como esta:

http://jsfiddle.net/5wytm0r4/

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

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

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

Answer 1

Con sombras de cuadro CSS

Puede usar varias box-shadows 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>

salida:

El soporte del navegador para box-shadows es IE9 + (para más información ver canIuse )

También puede hacer que la forma de los círculos superpuestos responda de acuerdo con el ancho de la ventana gráfica con unidades vw : 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>

El soporte del navegador para unidades vw es IE9 + (para más información, consulte canIuse )

Con SVG

Otro enfoque sería usar un svg en línea con el elemento <circle> .
Esto responde de acuerdo con el tamaño del padre y el soporte del navegador se remonta a IE9 como recuadros:

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 círculos más superpuestos. Puedes verlo en este bolígrafo: gusano animado

Y se ve así:

Answer 2

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>

Answer 3

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>

Answer 4

Puede lograr esto mediante pseudo-selectores como :: before y :: after. Puede encontrar el jsfiddle https://jsfiddle.net/zakirshaik/jL78m9d1/6/ .

Puede agregar sombras al código para aumentar la cantidad de círculos.

.circle-overlaping{
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  position:relative;
}

.circle-overlaping::before{
  content: '''';
  position: absolute;
  top: 0;
  left: 20px;
  background-color: yellow;
  width: 100px;
  height:100px;
  border-radius: 50%;
}

.circle-overlaping::after{
  content: '''';
  position: absolute;
  top: 0;
  left: 40px;
  background-color: blue;
  width: 100px;
  height:100px;
  border-radius: 50%;
}

<div class="circle-overlaping">

</div>