Paralelograma com CSS

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