# Edit in JSFiddle

```<div class="parent-wrapper">
<div class="hexagon box box-1">
<a href="#">box-1</a>
</div>
<div class="hexagon box box-2">
<a href="#">box-2</a>
</div>
<div class="hexagon box box-3">
<a href="#">box-3</a>
</div>
<div class="hexagon box box-4">
<a href="#">box-4</a>
</div>
<div class="hexagon box box-5">
<a href="#">box-5</a>
</div>
<div class="hexagon box box-6">
<a href="#">box-6</a>
</div>
</div>
```
```.parent-wrapper {
position: relative;
width: 800px;
display: block;
}

.box {
posaition: absolute;
cursor: pointer;
&:hover {
background-color: #ff0;
&:before {
border-bottom: 86.60px solid #ff0;
}
&:after {
border-top: 86.60px solid #ff0;
}
a {
color: #000;
}
}
a {
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 50%;
transform: translateY(-50%);
color: #fff;
display: block;
}
&.box-1 {
left: 50%;
top: 0;
}
&.box-2 {
left: 240px;
top: 10px;
}
&.box-3 {
left: 69%;
right: 0;
top: -160px;
transform: translateY(-50%);
}
&.box-4 {
left: 49.4%;
top: -241px;
}
&.box-5 {
top: -500px;
left: 88px;
}
&.box-6 {
top: -760px;
right: -704px;
}
}

.hexagon {
position: relative;
width: 300px;
height: 173.21px;
background-color: #64C7CC;
margin: 86.60px 0;
}

.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
}

.hexagon:before {
bottom: 100%;
border-bottom: 86.60px solid #64C7CC;
}

.hexagon:after {
top: 100%;
width: 0;
border-top: 86.60px solid #64C7CC;
}
```