HTML
<div class="container">
<div class="hex hex-1 hex-gap">
<div class="inner">
<h4>HOME</h4>
<hr />
<p>Home Sweet Home</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-2">
<div class="inner">
<h4>ABOUT US</h4>
<hr />
<p>We Are The Experts</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-3">
<div class="inner">
<h4>CONTACT US</h4>
<hr />
<p>We Open Everyday</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://www.sparkpeople.com/images/ArticlePics/eggs_and_toast.jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://i1.pudelekx.pl/64f965c0985e037bb1ab1d4ff650e541de78afc3/img_8488__880-jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://keymediasolutions.com/wp-content/uploads/japanese-themed-restaurant-benihana-is-one-of-the-most-po_16001206_800843087_1_0_14000700_500-175x175.jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://www.polloalhorno.co/ImagenesPolloAlHorno/ImagenesTop/PolloAlHornoConNaranja.jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-gap" style="background-image: url(http://images.recipebridge.com/rim/412/130845/r_175.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(http://kintakun-collection.co.id/wp-content/uploads/2015/02/6968914-food-mexican-chips-snacks-cheese-spices-olives-175x175.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://www.sparkcoach.com/images/ArticlePics/sandwich.jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://a2.mzstatic.com/us/r30/Purple/v4/43/2e/63/432e6372-04f8-915a-ed93-78d706b5de02/mzl.vykagjdg.175x175-75.jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://www.sparkpeople.com/news/genericpictures/pizza5.jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://images.talkingphonebook.com/images/timesunion/media_library/320/444/media6.jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://www.depositagift.com/uploads/bank_assets/images/Honeymoon/Resort/Spices.JPG');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-gap" style="background-image: url('https://www.cancercompass.com/images/recipe/Seafood/seared-salmon.jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://vkuso.ru/img/solenaya-krasnaya-ryba-iz-morozilki-175x175.jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('http://otvet.zp.ua/uploads/news/00004370b.jpg');">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
</div>
CSS
body {
font-family:arial;
font-size:12px;
background: #F35E5C;
margin:0;
padding:0;
}
#info {
background:#333;
opacity:0.8;
position: absolute;
top:5px;
right:5px;
width:280px;
color:#fff;
border-radius: 5px;
z-index:10
}
#info p {
padding:0 10px;
}
a {
text-decoration:none;
color: #3e8ed7;
}
a:hover {
color: #61b7e6;
}
.container {
width:700px;
height:100%;
position:absolute;
top:50px;
left:50%;
margin-left:-350px;
}
/* HEXAGON STARTS HERE */
.hex {
width:150px;
height:86px;
background-color: #ccc;
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: auto 173px;
-moz-background-size: auto 173px;
-ms-background-size: auto 173px;
-o-background-size: auto 173px;
position: relative;
float:left;
margin:25px 5px;
text-align:center;
zoom:1;
}
.hex.hex-gap {
margin-left: 86px;
}
.hex a {
display:block;
width: 100%;
height:100%;
text-indent:-9999em;
position:absolute;
top:0;
left:0;
}
.hex .corner-1,
.hex .corner-2 {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background: inherit;
z-index:-2;
overflow:hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.hex .corner-1 {
z-index:-1;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.hex .corner-2 {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hex .corner-1:before,
.hex .corner-2:before {
width: 173px;
height: 173px;
content: '';
position: absolute;
background: inherit;
top:0;
left: 0;
z-index: 1;
background: inherit;
background-repeat:no-repeat;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.hex .corner-1:before {
-webkit-transform: rotate(-60deg) translate(-87px, 0px);
-moz-transform: rotate(-60deg) translate(-87px, 0px);
-ms-transform: rotate(-60deg) translate(-87px, 0px);
-o-transform: rotate(-60deg) translate(-87px, 0px);
transform: rotate(-60deg) translate(-87px, 0px);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
.hex .corner-2:before {
-webkit-transform: rotate(60deg) translate(-48px, -11px);
-moz-transform: rotate(60deg) translate(-48px, -11px);
-ms-transform: rotate(60deg) translate(-48px, -11px);
-o-transform: rotate(60deg) translate(-48px, -11px);
transform: rotate(60deg) translate(-48px, -11px);
bottom:0;
}
/* Custom styles*/
.hex .inner {
color:#eee;
}
.hex h4 {
font-family: 'Josefin Sans', sans-serif;
margin:0;
}
.hex hr {
border:0;
border-top:1px solid #eee;
width:60%;
margin:15px auto;
}
.hex p {
font-size:16px;
font-family: 'Kotta One', serif;
width:80%;
margin:0 auto;
}
.hex.hex-1 {
background: #74cddb;
}
.hex.hex-2 {
background: #f5c53c;
}
.hex.hex-3 {
background: #80b971;
}
