Template:HexCSS

.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;
 -webkit-transform: scaleY(0.5774) rotate(-45deg);
 -ms-transform: scaleY(0.5774) rotate(-45deg);
 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;

}

.hexagon:after {

 bottom: -35.3553px;
 border-bottom: solid 2.8284px #333333;
 border-left: solid 2.8284px #333333;

}