3

Preciso criar um layout e fazer com que as divs sejam em diagonal e responsivo(100%), como no exemplo abaixo:

inserir a descrição da imagem aqui

O conteúdo de dentro tem que ficar em horizontal

Alguma idéia? Sugestão?

JSFiddle para edição

2 Respostas 2

4

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>

2

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

2
  • 1
    Excelente resposta +1, contudo como o autor falou há como deixa o conteúdo escrito paralelo (reto)?
    – Ricardo
    20/07/2015 às 17:26
  • Dei uma editada, amanha quando chegar no serviço faco uns ajustes 20/07/2015 às 20:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .