<div class="hexagon"></div>
.hexagon {
	width: 100px;
	height: 55px;
	background: red;
  margin: 150px auto;
	position: relative;
  
  &:before,
  &:after {
    content: "";
	  position: absolute;
	  width: 0;
	  height: 0;
  }
  
  &:before {
    top: -25px;
	  left: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-bottom: 25px solid red;
  }
  &:after {
    bottom: -25px;
	  left: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-top: 25px solid red;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.