Preciso criar um layout e fazer com que as divs sejam em diagonal e responsivo(100%), como no exemplo abaixo:
O conteúdo de dentro tem que ficar em horizontal
Alguma idéia? Sugestão?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePreciso criar um layout e fazer com que as divs sejam em diagonal e responsivo(100%), como no exemplo abaixo:
O conteúdo de dentro tem que ficar em horizontal
Alguma idéia? Sugestão?
Você pode trabalhar também com o método rotate
da propriedade transform
e "desfazer" a transformação (refaze-la no sentido contrário) em um elemento filho:
body{
margin:0 0 -250px;
padding:0 0 -250px;
overflow-x:hidden;
}
.block{
min-height: 200px;
width: 140%;
margin:-20% -14%;
padding:28% 0;
}
.block:last-child{
margin-bottom: -50%;
}
.diagonal{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
overflow:hidden;
position:relative;
}
.diagonal .inner{
position:relative;
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
.texto{
color:#FFF;
text-align:center;
font-size:3em;
}
#top{background: #A1A1A1;}
#content_1{background: #4EB67A;}
#content_2{background: #564EB6;}
#bottom{background: #D2C643;}
<div id="top" class="block diagonal">
<div class="inner texto">
Topo
</div>
</div>
<div id="content_1" class="block diagonal">
<div class="inner texto">
Conteudo 1
</div>
</div>
<div id="content_2" class="block diagonal">
<div class="inner texto">
Conteudo 2
</div>
</div>
<div id="bottom" class="block diagonal">
<div class="inner texto">
Rodapé
</div>
</div>
Você pode trabalhar com a propriedade css
skew
, ficaria mais ou menos assim: transform:skewY(-10deg);
.block{
width: 102%;
}
.formatado{
text-align: center;
color:#FFF;
font-size:100px;
padding: 80px;
}
#top{
height: 400px;
background: #A1A1A1;
}
#texto{
transform:skewY(10deg);
}
#content_1{
z-index: 1;
margin-top: -10%;
height: 400px;
position: relative;
background: #4EB67A;
transform:skewY(-10deg);
}
#content_2{
z-index: 1;
height: 400px;
position: relative;
background: #564EB6;
transform:skewY(-10deg);
}
#bottom{
margin-top: -10%;
text-align: bottom;
height: 400px;
background: #D2C643;
}
<div id="top" class="block formatado">
Topo
</div>
<div id="content_1" class="block">
<div id="texto" class="formatado">
Conteudo 1
</div>
</div>
<div id="content_2" class="block">
<div id="texto" class="formatado">
Conteudo 2
</div>
</div>
<div id="bottom" class="block formatado">
Rodapé
</div>
Ai é questão de adaptar a sua necessidade