practice css_circular

<!DOCTYPE html>
<html>
<head>
<style>
.circle{
 width:200px;
 height:200px;
 border-radius:50%;
 position:relative;
 left:200px;
 top:200px;
 background-color:lightblue;
}
.circle ul{
 list-style-type:none;
}
.circle ul li{
 height:50px;
 width:50%;
 position:absolute;
 left:50%;
 top:37.5%; /* 37.5% = (100%-((50px/200px)*100))/2 */
 background-color:red;
}
.circle ul li a{
 display:block;
 width:50px;
 height:50px;
 border-radius:50%;
 background-position:center;
 background-size:52px;
}  
</style>
</head>
<body>
  
<div class="circle">
 <ul>
  <li><a href="" style="background-image:url(twitter-icon.png);"></a></li>
  <li><a href="" style="background-image:url(facebook-icon.png);"></a></li>
  <li><a href="" style="background-image:url(google+-icon.png);"></a></li>
  <li><a href="" style="background-image:url(twitter-icon.png);"></a></li>
  <li><a href="" style="background-image:url(facebook-icon.png);"></a></li>
  <li><a href="" style="background-image:url(google+-icon.png);"></a></li>
  <li><a href="" style="background-image:url(share-icon.png);"></a></li>
 </ul>
 </div>

</body>
</html>

​x
 
<!DOCTYPE html><html><head><style>.circle{ width:200px; height:200px; border-radius:50%; position:relative; left:200px; top:200px; background-color:lightblue;}.circle ul{ list-style-type:none;}.circle ul li{ height:50px; width:50%; position:absolute; left:50%; top:37.5%; /* 37.5% = (100%-((50px/200px)*100))/2 */ background-color:red;}.circle ul li a{ display:block; width:50px; height:50px; border-radius:50%; background-position:center; background-size:52px;}  </style></head><body>  <div class="circle"> <ul>  <li><a href="" style="background-image:url(twitter-icon.png);"></a></li>  <li><a href="" style="background-image:url(facebook-icon.png);"></a></li>  <li><a href="" style="background-image:url(google+-icon.png);"></a></li>  <li><a href="" style="background-image:url(twitter-icon.png);"></a></li>  <li><a href="" style="background-image:url(facebook-icon.png);"></a></li>  <li><a href="" style="background-image:url(google+-icon.png);"></a></li>  <li><a href="" style="background-image:url(share-icon.png);"></a></li> </ul> </div>​</body></html>             

Share