Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="hexagon">
  <h2>Sweet hex!</h2>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

// Makes a CSS hexagon! based off of http://csshexagon.com/
@mixin hexagon($size, $color, $border: 0) {
  position: relative;
  width: $size; 
  height: ($size * 0.577);
  background-color: $color;
  margin: ($size * 0.288) 0;
  border-left: $border;
  border-right: $border;

  &:before,
  &:after {
    content: "";
    position: absolute;
    @if $border == 0 {
      width: 0;
      left: 0;
      border-left: ($size/2) solid transparent;
      border-right: ($size/2) solid transparent;
    } @else {
      z-index: 1;
      width: ($size * 0.707);
      height: ($size * 0.707);
      -webkit-transform: scaleY(0.5774) rotate(-45deg);
      -ms-transform: scaleY(0.5774) rotate(-45deg);
      transform: scaleY(0.5774) rotate(-45deg);
      background-color: inherit;
      left: ($size * 0.129);
    }
  }

  &:before {
    @if $border == 0 {
      bottom: 100%;
      border-bottom: ($size * 0.288) solid $color;
    } @else {
      top: -($size * 0.353);
      border-top: $border;
      border-right: $border;
    }
  }

  &:after {
    @if $border == 0 {
      top: 100%;
      width: 0;
      border-top: ($size * 0.288) solid $color;
    } @else {
      bottom: -($size * 0.353);
      border-bottom: $border;
      border-left: $border;
    }
  }
}

.hexagon {
  @include hexagon(300px, #f00);
  text-align: center;
  box-sizing: border-box;
  padding: 2em;
}

SassMeister-output.css

.hexagon {
  position: relative;
  width: 300px;
  height: 173.1px;
  background-color: #f00;
  margin: 86.4px 0;
  border-left: 0;
  border-right: 0;
  text-align: center;
  box-sizing: border-box;
  padding: 2em;
}
.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  left: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 86.4px solid #f00;
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 86.4px solid #f00;
}

SassMeister-rendered.html

<div class="hexagon">
  <h2>Sweet hex!</h2>
</div>