Wie man zwei kollabierende Kreise in reinem css3 realisiert?

Question

Was ich tun müssen, um auf dem Bild unten:

ich überhaupt nicht verwenden SVG will. Ich denke es sind zwei divs mit border-radius 50%. Aber wie fusioniere ich sie wie auf Bild? Kannst du das lösen oder einen Rat geben?

Answer 1

Dies ist ein simpliest Weg, es zu tun, können Sie es für Ihre Bedürfnisse

#main { 
 
    width: 80px; 
 
    border-radius: 50%; 
 
    height: 80px; 
 
    border: 3px solid blue; 
 
} 
 

 
#background { 
 
    background: grey; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
#small { 
 
    background: grey; 
 
    width: 30px; 
 
    border-radius: 50%; 
 
    height: 30px; 
 
    border: 3px solid blue; 
 
    margin-top: -30px; 
 
    margin-left: 50px; 
 
}

<div id="main"> 
 
    <div id="background"></div> 
 
</div> 
 
<div id="small"></div>

verbessern