<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; }