CSS3 Menu

Author @adamzazad [[email protected]]

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
    <div class="col-left">
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #1</a>
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #2</a>  
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #3</a>
    </div>
    <div class="col-right">
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #4</a>    
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #4</a>
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #4</a>    
    </div>
</div>

CSS

a {
  font-family: "Open Sans", sans-serif;
  text-decoration:none;
}
a:active,
a:focus {
  color:#000000;
}
.container {
    display:block;
    width: 674px;
    margin:70px auto;
    padding-right:15px;
    padding-left:15px;
    text-align:center;
}
.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after { clear:both; }
.col-left,
.col-right {
  width: 50%;
  float: left;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.col-right {
    margin-top: 40px;
    margin-left: -64px;
}
.link {
  position:relative;
  display:block;
  padding: 60px 40px 0px 40px;
  text-align:center;
  text-transform:uppercase;
  width:120px;
  height:140px;
  color:#000;
  margin-bottom: 20px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.link:before {
  width:100%;
  height:100%;
  position:absolute;
  content:"";
  background:#ACDBFC;
  top:0;
  left:0;
  right:0;
  margin:auto;
  z-index:-1;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.link:hover {
  color:#000;
}
.link:hover:before {
  background:#FFFFFF; 
}
.link .fa {
  display:block;
  margin-bottom:10px;
}

JavaScript

/*=================================
Custom CSS3 Menu 
@author: Adam Azad (@adamzazad)
All rights reserved; you may NOT copy any of the code found in this fiddle without permission or attribution to me. To use this, please  contact me at [email protected] or tweet me @adamzazad.
=================================*/