CSS para fazer uma imagem com forma de paralelograma:
/**
* paralelograma
*
* @author Difluir
* @link https://code.difluir.com/
*
*/
.caixa {
display: block;
position: relative;
width: 90%;
padding-bottom: 70%;
margin-bottom: 19px;
transform-origin: 0 100%;
-webkit-transform: skewX(-9deg) translatez(1px);
-ms-transform: skewX(-9deg) translatez(1px);
transform: skewX(-9deg) translatez(1px);
overflow: hidden;
}
.caixa .imagem {
content:'';
position: absolute;
width: 115%;
height: 100%;
background-size: cover;
background-position: center;
transform-origin: inherit;
-webkit-transform: skewX(9deg);
-ms-transform: skewX(9deg);
transform: skewX(9deg);
}O -9deg gira 9 graus negativo a div.
Já o 9deg deixa a imagem com 9 graus positivo, para não ficar torta dentro da div.
Pode alterar esses valores para mais ou menos, dependendo do resultado que deseja.
Onde quer mostrar a imagem usar:
<div class="caixa">
<div class="imagem" style="background-image:url('imagem.jpg');"></div>
</div>Se quiser, pode colocar o background-image no próprio CSS, no lugar de usar style na div imagem.
Eu uso style quando é conteúdo dinâmico, que o cliente irá trocar a imagem sempre que desejar.
Resultado:
Nota: o CSS acima pode fazer com que a imagem sobreponha outros elementos da página, ao ser visualizado pelo navegador Safari. A solução aqui foi usar z-index negativo nas classes .caixa e .imagem