Css 重复背景和对角线形状

我有一个设计，它的特点是这种条纹状的条带水平穿过，就像一个部分之间的分隔物

我的问题是，我不知道如何做到这一点，将响应/灵活的宽度

我认为唯一的方法是为条纹部分重复背景，然后在顶部上方进行一个div，以一定角度切割。。如果这有意义的话

---

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

HTML

查看

SVG

（可缩放矢量图形），它将非常灵敏，并且在文件大小上具有很小的权重。

<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>

.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;
}