Slant box using css without skewing text

This an example how to make a slant div without making the text slanted.

<aside class="skew-neg">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>http://hijoncon.com.</p>
        <p>This box is skewed. In supported browsers.</p>
    </div>
</aside>
<aside class="skew-neg red">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>http://hijoncon.com.</p>
        <p>This box is skewed. In supported browsers.</p>
    </div>
</aside>
<aside class="skew-neg yellow">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>http://hijoncon.com.</p>
        <p>This box is skewed. In supported browsers.</p>
    </div>
</aside>
html {
    background: #FFF;
    color: lightblue;
    font: normal small-caps normal 16px/150% Arial, Helvetica, sans-serif;;
    line-height: 150%;
}
aside {
    background: blue;
    margin: 0 auto;
    padding: 10%;
    width: 100%;
    box-sizing: border-box;
}
.red { background-color: red; }
.yellow { background-color: yellow; }

/* The good stuff */
.skew-neg {
    -webkit-transform: skewY(-15deg);
    -moz-transform: skewY(-15deg);
    -ms-transform: skewY(-15deg);
    -o-transform: skewY(-15deg);
    transform: skewY(-15deg);
}
.skew-pos {
    -webkit-transform: skewY(15deg);
    -moz-transform: skewY(15deg);
    -ms-transform: skewY(15deg);
    -o-transform: skewY(15deg);
    transform: skewY(15deg);
    width: 50%;
    margin: auto;
}

Demo: http://jsfiddle.net/z16jnzrh/show