web-dev-qa-db-fra.com

Cercles superposés en CSS avec 1 div

Je cherche à créer cette forme de cercles qui se chevauchent en CSS:

Desired overlapping cicles shape

Fondamentalement, juste des cercles empilés. 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 une seule div, en utilisant CSS3? J'ai regardé comment cela pouvait être fait facilement et j'ai pensé que si toutes les couleurs étaient les mêmes, vous auriez une forme de pilule comme celle-ci:

http://jsfiddle.net/5wytm0r4/

 #circles {
   background-color: red;
   width: 130px;
   height: 100px;
   border-radius: 50px;
 }
<div id="circles"></div>

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

htmlcsssvgcss-shapes
60
yesman

Avec CSS box-shadows

Vous pouvez utiliser plusieurs box-shadows avec plusieurs couleurs sur un div arrondi. 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;
}
<div id="circles"></div>

production :

CSS orvelapping circles

La prise en charge du navigateur pour les zones d'ombres est IE9 + (pour plus d'informations, voir canIuse )

Vous pouvez également rendre la forme de cercles qui se chevauchent sensible en fonction de la largeur de la fenêtre d'affichage avec nités vw: DÉMO 

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

Le support du navigateur pour les unités vw est IE9 + (pour plus d'informations, voir canIuse )

Avec SVG

Une autre approche consisterait à utiliser un svg en ligne avec le <circle> élément.
Cela répond en fonction de la taille du parent et la prise en charge du navigateur revient à IE9 comme les ombres de boîte:

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>

J'ai également développé la version SVG pour créer un "ver" animé avec plus de cercles qui se chevauchent. Vous pouvez le voir dans ce stylo: ver animé

Et cela ressemble à ceci:

Animated worm made of overlapping circles

108
web-tiki

Il est possible d'utiliser plusieurs images d'arrière-plan CSS et dégradés radiaux ensemble:

#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>
10
Salman A

Ou, si vous vous sentez fou, vous pouvez créer un svg et l'utiliser en ligne comme image de fond:

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

Vous pouvez y parvenir par des pseudo-sélecteurs comme :: avant et :: après, vous pouvez trouver le jsfiddle https://jsfiddle.net/zakirshaik/jL78m9d1/6/ .

Vous pouvez ajouter des ombres au code pour augmenter le nombre de cercles.

.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>
1
zakir