Responsively Align Slanted Divs

Question

Using a modified version of this 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 divs 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.

A good solution for this would be responsive and [preferably] css-only.

*{
    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%;
}

<div class="hero hero1">
    <div class="slanted">
        <h2>Some text</h2>
    </div>
</div>	

<div class="hero hero2">
    <div class="slanted hero-text">
        <h2>Some text</h2>
    </div>
</div>	

<div class="hero hero3">
    <div class="slanted hero-text">
        <h2>Some text</h2>
    </div>
</div>	

jsfiddle

Answer 1

You aren't going to be able to do this with just CSS if you are using JUST percentage based widths for the content divs and a static width for the slants.

Imagine it this was, lets say the width of your page is 10 and each of the slants has a width of 1. You have the 3 divs at 10%, 20%, and 30%, which means their widths are 1,2, and 3 respectively. Adding the slants makes their widths 2, 3, and 4, so they line up. Now, the problem comes when we make the container width 20, so the divs are now 4, 6 and 8, or 5, 7, and 9 after adding the slants. They no longer line up because the div width changed, but the slants didn't.

If you are okay with no IE8 support you can use a combo of calc (http://caniuse.com/#feat=calc) and min-width to achieve something like what you want. The slants are 29px long so if you change the div widths to calc(100% -700px), calc(100% -729px), and calc(100% -758px) or any set of three pixel widths as long as they stay 29px apart and then set a min-widths that are also 29px apart, you should be able to achieve something like what you want.

EDIT: Codepen example http://codepen.io/supah_frank/pen/oJcIA

Just change this CSS

.hero1 .slanted{
    width: calc(100% - 900px);
    min-width: 358px;
}
.hero2 .slanted{
    width: calc(100% - 929px);
    min-width: 329px;
}
.hero3 .slanted{
    width: calc(100% - 958px);
    min-width: 300px;
}