<div>
<ul>
<li class="hexagon_box_04">
<div class="box1 box"></div>
<div class="box2 box">
<div class="round"></div>
</div>
<div class="box3 box"></div>
</li>
</ul>
</div>
----------------------------style----------------------------------
.hexagon_box_04 {
position:relative;
}
.box{
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 18px;
border-left: 1px solid #ffdb26;
}
.hexagon_box_04 .box1 {
transform: rotate(60deg);
}
.hexagon_box_04 .box2 {
}
.round{
width: 12px;
height: 12px;
margin: 3px auto;
border-radius: 50%;
border: 1px solid #ffdb26;
}
.hexagon_box_04 .box3 {
transform: rotate(-60deg);
}
