css-shadow.html

.hexagon {
  position: relative;
  width: {{size}}px; 
  height: {{getHeight(size) | number:2}}px;
  background-color: {{color}};
  margin: {{getHeight(size)/2 | number:2}}px 0;{{shadowRule()}}{{borderRule()}}
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: {{getCapWidth(size) | number:2}}px;
  height: {{getCapWidth(size) | number:2}}px;
  -webkit-transform: scaleY({{scaleFactor | number:4 }}) rotate(-45deg);
  -ms-transform: scaleY({{scaleFactor | number:4 }}) rotate(-45deg);
  transform: scaleY({{scaleFactor | number:4 }}) rotate(-45deg);
  background-color: inherit;
  left: {{(size - getCapWidth(size))/2 - borderWidth | number:4 }}px;{{shadowRule()}}
}

.hexagon:before {
  top: -{{getCapWidth(size)/2 | number:4}}px;{{borderRuleTop()}}
}

.hexagon:after {
  bottom: -{{getCapWidth(size)/2 | number:4}}px;{{borderRuleBottom()}}
}

{{coverRule()}}