重复背景和对角线的形状

Question

我有一种设计，它具有水平穿过的这种条纹条带，就像部分之间的分隔。

我的问题是我不知道如何以灵敏，灵活的方式做到这一点。

我认为唯一的办法就是为条纹位设置一个重复的背景，然后在顶部设置一个div，它会在一个角度上切割......如果这有任何意义的话。

Answer 1

不是最漂亮的东西，但这应该让你开始 -

HTML

<div class="container">

    <div class="border grey-stripe"></div>

    <section class="bg-black">

        <div>
            <p>TEXT</p>
        </div>

    </section>

    <div class="border red-stripe"></div>

     <section class="bg-grey">

        <div>
            <p>TEXT</p>
        </div>

    </section>

</div>

CSS

.container {
    border:1px solid;
}
section div{
    padding-top:89px;
}

.bg-black {
    position:relative;
    margin-top:-89px;
    z-index:1;
    background:#000;
    height:200px;
    width:100%;
}

.bg-grey{
   position:relative;
    margin-top:-89px;
    z-index:1;
    background:#ccc;
    height:200px;
    width:100%;
}
.border {
    height:89px;
    z-index:2;
    position:relative;
}

.grey-stripe {
    background:url(http://i.imgur.com/J2brM1S.png) no-repeat;
    background-size:cover;
}

.red-stripe {
    background:url(http://i.imgur.com/ewqj4QB.png) no-repeat;
    background-size:cover;
}

fiddle