<div class="container">
  <h1><span>h1 heading</span></h1>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p>
  </div>
  <h1><span>h1 heading</span></h1>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at.</p>
  </div>
  <h2><span>h2 heading</span></h2>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis.</p>
  </div>
  <h2><span>h2 heading</span></h2>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus.</p>
  </div>
  <h2><span>h2 heading</span></h2>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p>
  </div>
  <h3><span>h3 heading</span></h3>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p>
  </div>
  <h4><span>h4 heading</span></h4>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p>
  </div>
  <h5><span>h5 heading</span></h5>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p>
  </div>
  <h6><span>h6 heading</span></h6>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p>
  </div>
  <h6><span>h6 heading</span></h6>
  <div class="content">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p>
  </div>
</div>

@import "compass/css3";

$color-a: #666;
$color-b: orangered;
$color-c: lawngreen;

* {
  box-sizing: border-box;
}

body {
  color: $color-a;
  min-width: 450px;
  overflow-x: hidden;
  padding-bottom: 80px;
}

.container {
  position: relative;
  .content {
    padding: 20px 20px;
    position: relative;
    z-index: 20;
    &:after {
      bottom: -30px;
      content: "";
      height: 50px;
      left: -5%;
      position: absolute;
      width: 110%;
      z-index: 0;
    }
    + h1,
    + h2,
    + h3,
    + h4,
    + h5,
    + h6 {
      margin-top: .25em;
    }
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    background: white;
    display: block;
    height: 50px;
    margin: 1em 0 0;
    position: relative;
    span {
      background: white;
      border: 5px solid;
      border-radius: 30px;
      box-shadow: 0 0 0 5px white, inset 0 0 0 5px white;
      display: block;
      margin: 0 0 0 50px;
      padding: 10px 30px 5px;
      position: absolute;
      text-transform: uppercase;
      top: 50%;
      transform-origin: top left;
      z-index: 30;
    }
    &:before {
      box-shadow: 0 0 0 5px white;
      content: "";
      height: 5px;
      left: -5%;
      position: absolute;
      top: 50%;
      transform-origin: top left;
      width: 110%;
      z-index: 30;
    }
    &:after {
      bottom: -40px;
      content: "";
      height: 50px;
      left: -5%;
      position: absolute;
      width: 110%;
      z-index: 20;
    }
    &:nth-child(4n+1) {
      span {
        border-color: $color-b;
        transform: rotate(-3deg) translateY(-25%);
      }
      &:before {
        background: $color-b;
        box-shadow: 0 0 0 5px white, 0 -10px 0 5px white;
        transform: rotate(2deg) translateY(-50%);
      }
      &:after {
        background: $color-a;
        transform: rotate(2deg);
      }
      + .content {
        background: $color-a;
        color: white;
        &:after {
          background: $color-a;
          transform: rotate(-2deg);
        }
        &:last-child {
          &:after {
            box-shadow: 0 5px 0 0 white, 0 10px 0 0 $color-b;
          }
        }
      }
    }
    &:nth-child(4n+3) {
      span {
        border-color: $color-c;
        transform: rotate(3deg) translateY(-50%);
      }
      &:before {
        background: $color-c;
        transform: rotate(-2deg) translateY(100%);
        transform-origin: bottom left;
      }
      &:after {
        background: white;
        bottom: -16px;
        transform: rotate(-2deg);
      }
      + .content {
        background: white;
        color: $color-a;
        &:after {
          background: white;
          transform: rotate(2deg);
        }
        &:last-child {
          &:after {
            box-shadow: 0 5px 0 0 white, 0 10px 0 0 $color-c, 0 15px 0 0 white, 0 60px 0 10px $color-a;
          }
        }
      }
    }
  }
}