title: Overlapping triangles
body: <p>Here is the shape I'm trying to create in pure CSS: </p>
  
  <p><a href="https://i.stack.imgur.com/BkFrn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BkFrn.png" alt="CSS overlapping triangles"></a></p>
  
  <p>I have a more complete jsfiddle <a href="http://jsfiddle.net/8Lxr5s57/7/" rel="nofollow noreferrer">http://jsfiddle.net/8Lxr5s57/7/</a>. Is there a better, more efficient way to achieve this same result?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.angled_container {
    background-color: #fff;
    height: 200px;
    position: relative;
    overflow: hidden;
    clear: both;
  }
  .angled_container:before,
  .angled_container:after {
    content: "";
    width: 110%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
  }
  .angled_container:before {
    background-color: #606060;
    transform: rotate(12deg);
    -webkit-transform-origin: left top;
    left: 0;
  }
  .angled_container:after {
    background-color: #6bb2c6;
    transform: rotate(-12deg);
    -webkit-transform-origin: right top;
    left: -10%;
  }
  .angled_container--open-left:before {
    background-color: #6bb2c6;
    z-index: 2;
  }
  .angled_container--open-left:after {
    background-color: #606060;
    z-index: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="angled_container angled_container--open-right"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>