Diamond Shaped Grid using css ( Source Code )

Diamond Shaped Grid using css ( Source Code )

Add font awesome cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


HTML


<div class="wrapper"> <div class="single-items"> <a href="#"><div class="box"> <p> <i class="fa fa-facebook"></i></p> </div> </a> <a href="#"><div class="box"> <p> <i class="fa fa-twitter"></i></p> </div> </a> <a href="#"><div class="box"> <p> <i class="fa fa-instagram"></i></p> </div> </a> </div> <div class="single-items"> <a href="#"><div class="box"> <p> <i class="fa fa-pinterest"></i></p> </div> </a> <a href="#"><div class="box"> <p> <i class="fa fa-dribbble"></i></p> </div> </a> <a href="#"><div class="box"> <p> <i class="fa fa-reddit"></i></p> </div> </a> </div> <div class="single-items"> <a href="#"><div class="box"> <p> <i class="fa fa-linkedin"></i></p> </div> </a> <a href="#"><div class="box"> <p> <i class="fa fa-vimeo"></i></p> </div> </a> <a href="#"><div class="box"> <p> <i class="fa fa-youtube"></i></p> </div> </a> </div> </div>


CSS


body { background:linear-gradient(to left, #1F8CAA, #68CCE5); color:#000000; font:13px georgia, serif; line-height:1.4; font-weight: lighter; } .wrapper { padding-top: 160px; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); padding-left: 100px; } .box { background-color: #262626; display: inline-block; height: 100px; overflow: hidden; width: 100px; } .box:hover { background-color: #fff; } .box p { transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); padding: 5px; font-size: 25px; } .box p i{ color: #fff; } .box:hover i{ color: #262626; }