Повторяющийся фон и диагональная форма

Question

У меня есть дизайн, который имеет такую ​​полоску полоски, которая проходит по горизонтали, как разделитель между разделами.

Моя проблема заключается в том, что я не знаю, как это сделать так, чтобы она была гибкой/гибкой.

Я думаю, что единственный способ сделать это будет иметь повторяющийся фон для бита stripey, а затем 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