title: Responsively Align Slanted Divs
body: <p>Using a modified version of <a href="http://lawrencenaman.com/css/responsive-slanted-divs-with-css/" rel="noreferrer">this</a> technique, I have managed to make slanted, responsive divs for a website I'm working on. The problem I am running into is that there are 3 slanted <code>divs</code> on top of each other, and they are meant to create one diagonal line down the page (so each slanted div needs to align properly with the ones around it). Using percentage widths for these divs hasn't worked so far, but I'm not sure what else to try.</p>
  
  <p>A good solution for this would be responsive and [preferably] css-only.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      margin: 0;
      padding:0;
  }
  .hero{
      width: 100%;
      position: relative;
      border: 1px solid black;
      background-color: green;
  }
  .slanted{
      position: relative;
      background-color: purple;
      width: 40%;
      padding: 3em 0 3em 1em;
  }
  .slanted:after{
      content: '';
      background-color: purple;
      position: absolute;
      top: 0;
      bottom: 0;
      right: -6em;
      width: 20em;
      overflow: visible;
      z-index: 1;
      -webkit-transform: skewX(-13deg);
      -moz-transform: skewX(-13deg);
      -ms-transform: skewX(-13deg);
      -o-transform: skewX(-13deg);
      transform: skewX(-13deg);
  }
  .slanted h2{
      position: relative;
      z-index:3;
  }
  .hero1 .slanted{
      width: 30%;
  }
  .hero2 .slanted{
      width: 20%;
  }
  .hero3 .slanted{
      width: 10%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hero hero1"&gt;
      &lt;div class="slanted"&gt;
          &lt;h2&gt;Some text&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;div class="hero hero2"&gt;
      &lt;div class="slanted hero-text"&gt;
          &lt;h2&gt;Some text&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;div class="hero hero3"&gt;
      &lt;div class="slanted hero-text"&gt;
          &lt;h2&gt;Some text&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/meg/xm1y1q2n/" rel="noreferrer">jsfiddle</a></p>