CSS şekli: bu çakışan Daire oluşturmak için arıyorum

Temelde, sadece yığılmış halkalar. Etrafıma baktım ve tüm çözümleri ben birden fazla div öğeleri kullanarak içerir bu etki için bkz. Ancak, bu tek bir div ile, CSS3 kullanılarak yapılabilir mi? Kolayca nasıl yapılabilir, baktım, ve, eğer tüm renkler aynı ise, bu gibi hap şeklinde olurdu diye düşündüm:

http://jsfiddle.net/5wytm0r4/

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

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

Ve sonra sadece Çeyrek Ay bir çift çizmek, ve bitirdiniz. Ancak, kapsül şeklindeki div benim bu ay şekiller çizmek için nasıl çözemiyorum.

Yuvarlak bir div üzerinde çeşitli renkler ile 26* *birden fazla kullanabilirsiniz. Virgülle ayrılmış olması gerekir:

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

çıkış :

Kutu gölgeler için tarayıcı desteği: Internet Explorer 9 (Daha fazla bilgi canIuse görmek için)

Ayrıca çakışan çemberler şeklinde yapabilirsinizduyarlıile görüş genişliğine görevw 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>

Vw birimler için tarayıcı desteği: Internet Explorer 9 (Daha fazla bilgi canIuse görmek için)

Başka bir yaklaşım kullanmak olacaktırsatır içi svg<circle> öğesi ile.
Bu üst boyutu ve kutu gölgeler gibi: browser support goes back to IE9 göre daha duyarlı

svg{width:80%;}

<svg viewbox="0 0 100 30">  
  <circle cx="59" cy="15" r="10" fill="darkorange" />
  <circle cx="56" cy="15" r="10" fill="gold" />
  <circle cx="53" cy="15" r="10" fill="tomato" />
  <circle cx="50" cy="15" r="10" fill="teal" />
</svg>