css3 distorce a transformação de um lado

entendendo como criar um efeito "CSS3 Transform Skew One Side" pode ser útil para vários projetos de design da web. No entanto, é importante observar que simplesmente aplicar uma transformação de inclinação pode não produzir os resultados desejados ao usar uma imagem para o fundo. A solução fornecida usando fronteiras sólidas não atingirá esse efeito de maneira eficaz. Por exemplo, se você aplicou uma distorção de 20 graus no contêiner pai, dê o valor aninhado (imagem) um inclinação de -20 graus. estouro: oculto; } #paralelogram { Largura: 150px; Altura: 100px; margem: 0 0 0 -20px; Transformar: Skew (20deg); Antecedentes: vermelho; estouro: oculto; Posição: relativa; } .Image { Antecedentes: URL (http://placekitten.com/301/301); Posição: Absoluto; topo: -30px; Esquerda: -30px; Direita: -30px; Inferior: -30px; Transformar: inclinação (-20deg); }

Este código criará uma inclinação de 20 graus no contêiner de paralelograma vermelho. Dentro dele, uma imagem será colocada em uma divindora aninhada com uma inclinação de -20 graus, revertendo efetivamente a inclinação aplicada ao contêiner pai e revelando a área transparente distorcida atrás dela.