CSSでセクションを斜めに分割する

beforeに対してtransformをかけて実装しました。

DEMO

HTML

<div class="wrapper">
    <section class="red">
        <h1>RED</h1>
        <p>sectionをななめに分割します。</p>
    </section>
    
    <section class="blue">
        <h1>BLUE</h1>
        <p>sectionをななめに分割しときます。</p>
    </section>
    
    <section class="purple">
        <h1>PURPLE</h1>
        <p>sectionをななめに分割してます。</p>
    </section>
    
    <section class="green">
        <h1>GREEN</h1>
        <p>sectionをななめに分割しときますよ。</p>
    </section>
    
    <section class="yellow">
        <h1>YELLOW</h1>
        <p>sectionをななめに分割しときました。</p>
    </section>
</div>

SCSS

@import "compass/reset";

section {
    position: relative;
    padding: 35px 15px;
    
    &:before {
        display: block;
        position: absolute;
        top: 0; left: -10%;
        margin-top: -25px;
        width: 120%; height: 50px;
        content: "";
        transform: rotate(5deg);
    }
}

h1 {
    color: #fff;
    font: 30px "AvenirNext-Heavy";
}

p {
    margin-top: 20px;
     color: #fff;
}

.wrapper {
    width: 465px;
    overflow: hidden;
}

.red {
    background: #dc5252;
    overflow: hidden;
}

.blue {
    background: #65b9c3;
    overflow: hidden;
    
    &:before {
        background: #dc5252;
    }
}

.purple {
    background: #8f65c3;
    overflow: hidden;
    
    &:before {
        background: #65b9c3;
    }
}

.green {
    background: #83c287;
    overflow: hidden;
    
    &:before {
        background: #8f65c3;
    }
}

.yellow {
    background: #dbe286;
    overflow: hidden;
    
    &:before {
        background: #83c287;
    }
}