.hexagon {
position: relative;
width: 100px;
height: 57.74px;
margin: 28.87px 0;
border-left: solid 2px #333333;
border-right: solid 2px #333333;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 70.71px;
height: 70.71px;
transform: scaleY(0.5774) rotate(-45deg);
left: 12.6447px;
}
.hexagon:before {
top: -35.3553px;
border-top: solid 2.8284px #333333;
border-right: solid 2.8284px #333333;
background-color: inherit;
}
.hexagon:after {
bottom: -35.3553px;
border-bottom: solid 2.8284px #333333;
border-left: solid 2.8284px #333333;
background-color: inherit;
}