8

inserir a descrição da imagem aqui recentemente recebi um layout para desenvolver, no qual tem um aparte em especifico que não consigo fazer, preciso de uma div que fique inclinada, assim como no exemplo, mais que o texto dele flua normalmente, que o texto não fique virado no caso de usar transform.

alguem ai tem alguma dica, sugestão de como fazer?

obrigado

1
  • 2
    Me parece mais o caso de aplicar uma máscara na div para cortar a imagem e usar elementos espaçadores no texto do que distorcer tudo. As fotos do exemplo estão cortadas em diagonal, e não inclinadas (o que, por sinal, ficaria um bocado estranho em se tratando de bebês e faces humanas).
    – Largato
    Commented 25/01/2015 às 14:41

4 Respostas 4

16

Você pode usar a propriedade transform com o valor skew que é utilizado para modificar o ângulo dos elementos.

inserir a descrição da imagem aqui

Exemplificando:

.skew {
  width: 10px;
  height: 100px;
  background: black;
  -webkit-transform: skew(0deg); /* Chrome, Opera */
      -ms-transform: skew(0deg); /* IE */
          transform: skew(0deg); /* Padrão */
}

.positive {
  -webkit-transform: skew(10deg); /* Chrome, Opera */
      -ms-transform: skew(10deg); /* IE */
          transform: skew(10deg); /* Padrão */
}

.negative {
  -webkit-transform: skew(-10deg); /* Chrome, Opera */
      -ms-transform: skew(-10deg); /* IE */
          transform: skew(-10deg); /* Padrão */
  }
<span>0 DEG</span>
<div class="skew"></div>

<span>10 DEG</span>
<div class="skew positive"></div>

<span>-10 DEG</span>
<div class="skew negative"></div>

OBS: Você pode ver um artigo com uma explicação mais detalhada a respeito de todos os valores da propriedade transform aqui.

Em seu caso você pode fazer uma inclinação positiva em uma DIV, e as suas imagens filhas receberão o efeito de skew, e dentro fazer o uso de um parágrafo aplicando o SKEW de forma inversa para que o texto seja exibido da forma normal.

Exemplificando:

.skew {
  width: 810px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #F26544;
  -webkit-transform: skew(30deg);
      -ms-transform: skew(30deg);
          transform: skew(30deg); /* SKEW da div*/
}

.skew img {
  width: 150px;
  height: 150px;
  margin-right: 25px;
  float: left;
}

.p-skew {
  padding: 10px;
  -webkit-transform: skew(-30deg);
      -ms-transform: skew(-30deg);
          transform: skew(-30deg); /* SKEW inverso para o texto não inclinar */
}
<div class="skew">
  <img src="http://aprenderabrincar.com/wp-content/uploads/2014/05/bebe-ojos-cafes.jpg" alt="Sem Imagem"> 
  
  <p class="p-skew">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique aspernatur esse accusantium non ullam suscipit autem ipsum totam labore voluptatibus architecto unde impedit, error quas mollitia cumque animi, cum eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique aspernatur esse accusantium non ullam suscipit autem ipsum totam labore.</p>
</div>

8
  • 3
    Ficou legal a imagem e o exemplo. Só não esqueça do suporte a outros navegadores, se não me engano o Chrome precisa de -webkit-transform. Commented 24/01/2015 às 19:59
  • Sim, obrigado! Acabei de ajustar, é o costume de usar o codepen com auto-prefixer.
    – user20038
    Commented 24/01/2015 às 20:02
  • 1
    Se puder, coloque uma foto como as do exemplo no lugar da imagem de teste pra gente ver como fica ;)
    – Largato
    Commented 25/01/2015 às 14:46
  • Grato pelo feedback. Notei que ela distorce um bocado, não? Mas talvez seja o que o Autor da Pergunta pretende.
    – Largato
    Commented 25/01/2015 às 15:09
  • 2
    @rrnan A partir da versão 36 (a atual é a 40) a propriedade transform não precisa de prefixo no Chrome.
    – Kazzkiq
    Commented 25/01/2015 às 17:48
5

Outra forma, além das já apresentadas e explicadas, também utilizando a propriedade skew mas aplicando a transformação somente em dois elementos (um antes e outro depois da imagem), ao invés de transformar toda a div, mantendo assim o aspecto da imagem:

image
No exemplo, dois elementos (antes e depois da imagem) com cores de background diferentes.

Código de exemplo (utilizando span):

*{margin:0;padding:0}

.image-wrapper {
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 300px
}

.image-wrapper > img {
  width: 100%
}

.cut {
  background: #fff; /* A cor dos elementos antes e depois */
  display: block;
  top: 0; bottom: 0;
  position: absolute;
  width: 100px
}

.left {
  -webkit-transform: skew(16deg) translateX(-70px);
      -ms-transform: skew(16deg) translateX(-70px);
          transform: skew(16deg) translateX(-70px);
  left: 0
}

.right {
  -webkit-transform: skew(16deg) translateX(70px);
      -ms-transform: skew(16deg) translateX(70px);
          transform: skew(16deg) translateX(70px);
  right: 0
}
<div class='image-wrapper'>
  <span class='cut left'></span>
  <img src='https://i.sstatic.net/yMfhN.jpg' alt='Chá de Bebê'/>
  <span class='cut right'></span>
</div>

4
  • muito útil, mais eu precisava do background transparente, no final não utilizei no site
    – Danilo
    Commented 20/02/2015 às 17:17
  • @Danilo aí já são detalhes que você não especificou na pergunta :) Commented 20/02/2015 às 17:27
  • mancada minha mesmo, é que precisava aparecer o background que estava na pagina inteira, mais value a intençaõ
    – Danilo
    Commented 20/02/2015 às 17:29
  • @Danilo se possível, responda a sua pergunta com a solução que encontrou e marque-a como correta. Commented 20/02/2015 às 17:32
2

Use CSS3 Transform: Skew AJUSTE A SUA NECESSIDADE.

#square {
    -ms-transform: skew(30deg); /* IE 9 */
    -webkit-transform: skew(30deg); /* Chrome, Safari, Opera */
    transform: skew(30deg); /* Standard syntax */
    transform-origin: bottom left; /* Prevent the bottom from shifting */
}

Exemplo: http://jsfiddle.net/gmrq1ac4/1/

2

Segue o que você quer! Fiz uma div com o angulo diagonal, e deixei a imagem dentro da div com as configurações contrárias! ou seja, a div fica diagonal e a foto fica normal! entende a lógica?

Abraços!

.foto{
margin-top: -4.6em;
margin-left: -5em;
background: #ffffff;
overflow: hidden;
  width: 32em;
 height: 28.1em;
  -webkit-transform: skew(-16deg) translateX(-70px);
      -ms-transform: skew(-16deg) translateX(-70px);
          transform: skew(-16deg) translateX(-70px);
  left: 0;
}

.foto img{
  width: 150%;
margin-left: -10em;
  -webkit-transform: skew(16deg) translateX(140px);
      -ms-transform: skew(16deg) translateX(140px);
          transform: skew(16deg) translateX(140px);
  left: 0
}
<div class='foto'>
  <img src='https://i.sstatic.net/yMfhN.jpg' alt='Chá de Bebê'/>
</div>

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 .