Honeycomb UI/Code

<style type="text/css">
@media screen and (min-width:780px){
.honeycomb{display:none;}
:root {
  --main-bg-color: #017318;
}
.wrap{text-align:center;margin:0px auto;width:606px;height:606px;min-width:606px;position:relative;} 
.nav{width:200px;height:116px;background:var(--main-bg-color);display:inline-block;position:relative;line-height:116px;text-align:center;color:#FFF;font-size:25px;text-decoration:none;float:left;margin-top:62px;margin-right:2px important;} 

.nav s{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:100px dotted transparent;border-right:100px dotted transparent;border-bottom:60px solid var(--main-bg-color);left:0px;top:-60px;} 

.nav b{width:0;height:0;display:block;overflow:auto;position:absolute;border-left:100px dotted transparent;border-right:100px dotted transparent;border-top:60px solid var(--main-bg-color);bottom:-60px;left:0px;} 

.a0{--main-bg-color: #ff9900;left:100px;top:0px;position:absolute;} 
.a1{--main-bg-color: #017318;left:304px;top:0px;position:absolute;}
.a6{--main-bg-color: #c8e6c9;
left:202px;top:180px;position:absolute;}
.a2{--main-bg-color: #cc0000;left:-2px;top:180px;position:absolute;}
.a3{--main-bg-color: #78909c;left:406px;top:180px;position:absolute;}
.a4{--main-bg-color: #0033cc;left:100px;top:360px;position:absolute;} 
.a5{--main-bg-color: #cccc00;left:304px;top:360PX;position:absolute;}

.nav:hover{transition: all 0.01s;transform: scale(1.1);z-index:1;background:#8CBF26;color:#333333;} 
.nav.a6:hover{color:#333333;} 
.nav:hover s{border-bottom-color:#8CBF26;} 
.nav:hover b{border-top-color:#8CBF26;} 
}
@media screen and (max-width:779px){
.wrap{display:none;}
.honeycomb{display:block;width:auto;height:auto;}
}
</style>
<div class="wrap">
<div class="nav a0"><s></s>ITEM2<b></b></div>
<div class="nav a1"><s></s>ITEM1<b></b></div>
<div class="nav a2"><s></s>ITEM3</a><b></b></div>
<div class="nav a6"><s></s><img src="http://glovo.com/wps/wordpress/wp-content/uploads/2021/07/Glovo_logo_200x79-2.png"></img><b></b></div>
<div class="nav a3"><s></s>ITEM6<b></b></div>
<div class="nav a4"><s></s>ITEM4<b></b></div>
<div class="nav a5"><s></s>ITEM5<b></b></div>
</div>