Montar layout com linhas tortas

[mruoppolo 14]

Olá, tudo bem??

 

Estou montando um layout onepage com bootstrap, onde a separação das sessões é feita por uma linha torta, assim como mostra esta pequena parte do layout:

 

Como eu faço esta linha torta ai com css?? Existe alguma forma ou eu teria que recortar da imagem do layout mesmo??

 

Obrigado!

[rikaschmitt 54]

Dá para usar a propriedade "transform rotate" do CSS.. e também você pode usar alguma imagem.

[mruoppolo 14]

Como ficaria isso??

 

Eu fiz um pequeno teste apenas para testar, criei as seguintes classes:

.green{background-color:green;}
.red{background-color:red;}
.black{background-color:black;}

.div{
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
    height:300px;
    width:100%;
}

E coloquei os seguintes códigos:

<div class="div green"></div>
<div class="div black"></div>
<div class="div red"></div>

Ficou quase o que eu preciso, mas não exatamente o que eu preciso, ele não deixou as divs terem 100% de width e também o problema de criar uma barra de rolagem horizontal no site como mostra o print que eu tirei:

 

Obrigado