Adjacent circles with HTML and CSS -
i wonder if it's possible, , if - how, draw adjacent circles seen on image below html , css?
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
Post a Comment