JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="hex link1"><span class="s1"></span><span class="s2"></span>Ссылка 1</a>
<a href="#" class="hex link2"><span class="s1"></span><span class="s2"></span>Ссылка 2</a>
<a href="#" class="hex link3"><span class="s1"></span><span class="s2"></span>Ссылка 3</a>

CSS

.hex,
.hex span { display:block; position:absolute; -moz-box-sizing:border-box; box-sizing:border-box; border-left:1px solid transparent; border-right:1px solid transparent;}
.hex { text-indent:-9000px;}
.hex span { left:-1px; top:0; background:inherit; overflow:hidden;}
.hex span.s1 { -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); transform:rotate(60deg);}
.hex span.s2 { -webkit-transform:rotate(-60deg); -moz-transform:rotate(-60deg); transform:rotate(-60deg);}
.hex span.s1::after,
.hex span.s2::after { content:''; position:absolute; left:-1px; background:inherit;}
.hex span.s1::after { -webkit-transform:rotate(-60deg); -moz-transform:rotate(-60deg); transform:rotate(-60deg);}
.hex span.s2::after { -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); transform:rotate(60deg);}
.hex:hover { z-index:2;}

.hex,
.hex span,
.hex span.s1::after,
.hex span.s2::after { width:173px; height:100px;}

.hex span.s1::after,
.hex span.s2::after { top:-50px; height:200px;}

.hex,
.hex span { border-color:#f00;}
.hex:hover,
.hex:hover span { border-color:#0f0;}

.link1 { left:20px; top:70px; background:url(http://img-fotki.yandex.ru/get/9300/73201501.0/0_ceb50_c519bb02_M.png) no-repeat center center;}
.link2 { left:192px; top:70px; background:url(http://img-fotki.yandex.ru/get/9762/73201501.0/0_ceb9a_6983bdda_M.jpg) no-repeat center center;}
.link3 { left:106px; top:219px; background:url(http://img-fotki.yandex.ru/get/9493/73201501.1/0_ceb9b_f1edb106_M.jpg) no-repeat center center;}