Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="page">
  <div class="row">
    <div class="hex">
      <div class="hexTop"></div>
      <div class="hexBottom"></div>
    </div>
    
    <div class="hex-2">
      <div class="hexTop"></div>
      <div class="hexBottom"></div>
    </div>
    
    <div class="hex-3">
      <div class="hexTop"></div>
      <div class="hexBottom"></div>
    </div>  
    
    <div class="hex">
      <div class="hexTop"></div>
      <div class="hexBottom"></div>
    </div>
    
    <div class="hex-2">
      <div class="hexTop"></div>
      <div class="hexBottom"></div>
    </div>
  </div>
  
  <div class="sectionWrapper--angled">
    <div class="section">
      <div class="content">
        <p>Donec vitae elit semper, pharetra dui nec, bibendum eros. Mauris aliquam orci enim, vel tempor velit ultricies a. Curabitur vitae semper dui. Pellentesque pharetra nisi elit. Integer laoreet dictum nisl nec tincidunt. Fusce sed auctor augue. Mauris ullamcorper laoreet augue sit amet imperdiet. Nunc mattis ligula et molestie pharetra. Donec sed nibh ante. Donec tempor fermentum purus, et facilisis augue molestie sed. Phasellus eu metus ut risus vulputate dignissim non vitae arcu. Nam tincidunt est sed leo consectetur, et varius lorem accumsan.</p>
      </div>
    </div>
  </div>  
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

$pageMaxWidth: 1000px;

* {
  box-sizing: border-box;
}

.page {
  margin: 0 auto;
  max-width: $pageMaxWidth;
  background-color: #eee;
}

.row {
  display: flex;
  margin-bottom: 100px;
}

.content {
  color: white;
}

.content {
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  padding: 60px;
}

@mixin hexagon($width, $imgURL, $selector: 'hex') {
  
  $scaleFactor: tan(30*(3.14159265359/180));
  
  .#{$selector} {
    
    position: relative;
    width: $width;
    height: $width/sqrt(3);
    margin: ($width/sqrt(3)) / 2 0;
    background-image: url('#{$imgURL}');
    background-size: auto ($width/sqrt(3) * 2);
    background-position: center;
    
    &Top,
    &Bottom {
      position: absolute;
      z-index: 1;
      width: $width/sqrt(2);
      height: $width/sqrt(2);
      overflow: hidden;
      transform: scaleY($scaleFactor) rotate(-45deg);
      background: inherit;
      left: ($width - $width/sqrt(2))/2;
      
      &:after {
        content: "";
        position: absolute;
        width: $width;
        height: $width/sqrt(3);
        transform: rotate(45deg) scaleY(1/$scaleFactor) translateY(-($width/sqrt(3))/2);
        transform-origin: 0 0;
        background: inherit;
      }
    }
    
    &Top {
      top: - $width/sqrt(2)/2;
      
      &:after {
        background-position: center top;
      }  
    }
    
    &Bottom {
      bottom: -$width/sqrt(2)/2;
    
      &:after {
        background-position: center bottom;  
      }
    }
    
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: #{$width};
      height: $width/sqrt(3);
      z-index: 2;
      background: inherit;
    }
    
  }
  
}


@mixin triangle-hero-section($selector, $bgColor: rgb(83, 89, 97), $height: 100px) {

  .#{$selector} {

    &Wrapper--angled {
      overflow: hidden;
      padding-top: $height;
    }

    position: relative;
    background-color: $bgColor;
    
    &:before,
    &:after {
     content: "";
     display: block;
     position: absolute;
     top: -$height;
     width: 0;
     height: 0;
     border-style: solid;
     border-color: transparent;
     border-bottom-color: $bgColor;
    }
    
    &:before {
      left: 0;
      border-width: 0 $pageMaxWidth/2 $height 0;
    }
    
    &:after {
      right: 0;
      border-width: 0 0 $height $pageMaxWidth/2;
    }
  }
  
}


@include hexagon(200px, 'http://placekitten.com/g/500/500');
@include hexagon(200px, 'http://placekitten.com/g/600/600', 'hex-2');
@include hexagon(200px, 'http://www.fillmurray.com/500/500', 'hex-3');

@include triangle-hero-section('section');

SassMeister-output.css

* {
  box-sizing: border-box;
}

.page {
  margin: 0 auto;
  max-width: 1000px;
  background-color: #eee;
}

.row {
  display: flex;
  margin-bottom: 100px;
}

.content {
  color: white;
}

.content {
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  padding: 60px;
}

.hex {
  position: relative;
  width: 200px;
  height: 115.47005px;
  margin: 57.73503px 0;
  background-image: url("http://placekitten.com/g/500/500");
  background-size: auto 230.94011px;
  background-position: center;
}
.hexTop, .hexBottom {
  position: absolute;
  z-index: 1;
  width: 141.42136px;
  height: 141.42136px;
  overflow: hidden;
  transform: scaleY(0.57735) rotate(-45deg);
  background: inherit;
  left: 29.28932px;
}
.hexTop:after, .hexBottom:after {
  content: "";
  position: absolute;
  width: 200px;
  height: 115.47005px;
  transform: rotate(45deg) scaleY(1.73205) translateY(-57.73503px);
  transform-origin: 0 0;
  background: inherit;
}
.hexTop {
  top: -70.71068px;
}
.hexTop:after {
  background-position: center top;
}
.hexBottom {
  bottom: -70.71068px;
}
.hexBottom:after {
  background-position: center bottom;
}
.hex:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 115.47005px;
  z-index: 2;
  background: inherit;
}

.hex-2 {
  position: relative;
  width: 200px;
  height: 115.47005px;
  margin: 57.73503px 0;
  background-image: url("http://placekitten.com/g/600/600");
  background-size: auto 230.94011px;
  background-position: center;
}
.hex-2Top, .hex-2Bottom {
  position: absolute;
  z-index: 1;
  width: 141.42136px;
  height: 141.42136px;
  overflow: hidden;
  transform: scaleY(0.57735) rotate(-45deg);
  background: inherit;
  left: 29.28932px;
}
.hex-2Top:after, .hex-2Bottom:after {
  content: "";
  position: absolute;
  width: 200px;
  height: 115.47005px;
  transform: rotate(45deg) scaleY(1.73205) translateY(-57.73503px);
  transform-origin: 0 0;
  background: inherit;
}
.hex-2Top {
  top: -70.71068px;
}
.hex-2Top:after {
  background-position: center top;
}
.hex-2Bottom {
  bottom: -70.71068px;
}
.hex-2Bottom:after {
  background-position: center bottom;
}
.hex-2:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 115.47005px;
  z-index: 2;
  background: inherit;
}

.hex-3 {
  position: relative;
  width: 200px;
  height: 115.47005px;
  margin: 57.73503px 0;
  background-image: url("http://www.fillmurray.com/500/500");
  background-size: auto 230.94011px;
  background-position: center;
}
.hex-3Top, .hex-3Bottom {
  position: absolute;
  z-index: 1;
  width: 141.42136px;
  height: 141.42136px;
  overflow: hidden;
  transform: scaleY(0.57735) rotate(-45deg);
  background: inherit;
  left: 29.28932px;
}
.hex-3Top:after, .hex-3Bottom:after {
  content: "";
  position: absolute;
  width: 200px;
  height: 115.47005px;
  transform: rotate(45deg) scaleY(1.73205) translateY(-57.73503px);
  transform-origin: 0 0;
  background: inherit;
}
.hex-3Top {
  top: -70.71068px;
}
.hex-3Top:after {
  background-position: center top;
}
.hex-3Bottom {
  bottom: -70.71068px;
}
.hex-3Bottom:after {
  background-position: center bottom;
}
.hex-3:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 115.47005px;
  z-index: 2;
  background: inherit;
}

.section {
  position: relative;
  background-color: #535961;
}
.sectionWrapper--angled {
  overflow: hidden;
  padding-top: 100px;
}
.section:before, .section:after {
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #535961;
}
.section:before {
  left: 0;
  border-width: 0 500px 100px 0;
}
.section:after {
  right: 0;
  border-width: 0 0 100px 500px;
}

SassMeister-rendered.html

<div class="page">
  <div class="row">
    <div class="hex">
      <div class="hexTop"></div>
      <div class="hexBottom"></div>
    </div>
    
    <div class="hex-2">
      <div class="hexTop"></div>
      <div class="hexBottom"></div>
    </div>
    
    <div class="hex-3">
      <div class="hexTop"></div>
      <div class="hexBottom"></div>
    </div>  
    
    <div class="hex">
      <div class="hexTop"></div>
      <div class="hexBottom"></div>
    </div>
    
    <div class="hex-2">
      <div class="hexTop"></div>
      <div class="hexBottom"></div>
    </div>
  </div>
  
  <div class="sectionWrapper--angled">
    <div class="section">
      <div class="content">
        <p>Donec vitae elit semper, pharetra dui nec, bibendum eros. Mauris aliquam orci enim, vel tempor velit ultricies a. Curabitur vitae semper dui. Pellentesque pharetra nisi elit. Integer laoreet dictum nisl nec tincidunt. Fusce sed auctor augue. Mauris ullamcorper laoreet augue sit amet imperdiet. Nunc mattis ligula et molestie pharetra. Donec sed nibh ante. Donec tempor fermentum purus, et facilisis augue molestie sed. Phasellus eu metus ut risus vulputate dignissim non vitae arcu. Nam tincidunt est sed leo consectetur, et varius lorem accumsan.</p>
      </div>
    </div>
  </div>  
</div>