Adjacent circles with HTML and CSS -


i wonder if it's possible, , if - how, draw adjacent circles seen on image below html , css?

enter image description here

you may try this:

jsfiddle demo(added few more circles make more interesting)

css

#container {   position: relative;   width: 100%;   padding-bottom: 100%; }  #circle {   position: absolute;   width: 50%;   height: 50%;   background-color: #000000;   border-radius: 50%; }  #small-circle{   margin-top: 25%;   margin-left: 45.5%;   position: absolute;   width: 40%;   height: 40%;   background-color: #e5e5e5;   border-radius: 50%; }#smallest-circle{   margin-top: 55%;   margin-left: 78%;   position: absolute;   width: 20%;   height: 20%;   background-color: #f00;   border-radius: 50%; } 

html

<div id="container">   <div id="circle">   </div>     <div id="small-circle">       </div>     <div id="smallest-circle">       </div> </div> 

Comments

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

android - Associate same looper with different threads -

visual studio 2010 - Connect to informix database windows form application -