HTML CSS examples for CSS Widget:Shape
Create circle with div
<html> <head> <style> .container {<!-- w ww. ja v a 2s . c o m--> border:3px solid Chartreuse; width:100%; height:401px; background:yellow; position:relative; } .cir_1,.cir_2,.cir_3,.cir_4,.cir_5,.cir_6 { position:absolute; border-radius:51%; } .cir_1 { height:100px; width:100px; background:yellow; } .cir_2 { height:81px; width:81px; background:orange; margin-left:102px; margin-top:3px; } .cir_3 { height:181px; width:181px; background:purple; margin-left:170px; top:16px; } .cir_4 { height:111px; width:111px; background:blue; left:61px; top:82px; } </style> </head> <body> <div class="container"> <div class="cir_1"></div> <div class="cir_2"></div> <div class="cir_3"></div> <div class="cir_4"></div> <div class="cir_5"></div> <div class="cir_6"></div> </div> </body> </html>