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>

Share