CSS Hexagon

CSS Hexagon

HTML

<div class="hexagon"><div></div></div>

CSS

.hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: #64C7CC;
  margin: 86.60px 0;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 43.9340px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.hexagon:before {
  top: -106.0660px;
}

.hexagon:after {
  bottom: -106.0660px;
}

/*cover up extra shadows*/

HTML

<a href="#"><span class="hex">f</span></a><

CSS

.hex{
 position:relative;
 display: inline-block; 
 text-align:center;
 line-height:37px;
 font-size:15px;}
.hex,.hex:before,.hex:after{
 height: 37px;
        width: 64px;
 background: #f00;
 border-left:1px solid #00F;
 border-right:1px solid #00F
}
.hex:before{
    position: absolute;
    content: "";
    left: -1px;
    top: 0;
    z-index: -1;
    transform: rotate(60deg);
}
.hex:after{
    position: absolute;
    content: "";
    left:-1px;
    top: 0;
    z-index: -1;
    transform: rotate(-60deg);
}

Tham khảo từ:

http://www.cssscript.com/demo/creating-hexagon-buttons-with-pure-css-css3/#