rotate - skew css

Sesgar una esquina de la imagen

Question

Estoy tratando de sesgar una esquina de mi fondo div como se muestra en la marca de verificación verde en la imagen a continuación:

Sin embargo, en CSS3 no puedo lograr eso, sesgar completamente sesga cada esquina. Solo quiero sesgar la esquina inferior derecha hacia la izquierda (por ejemplo, 25 px) y mantener la perspectiva (como se muestra en la imagen de arriba).

 background-image: url(''http://rtjansen.nl/images/stackoverflow.png'');
-webkit-transform: skew(-45deg);

Fiddle: http://jsfiddle.net/3eX5j/

Mi código es:

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url(''http://rtjansen.nl/images/stackoverflow.png'');
    -webkit-transform: skew(-45deg);
}

Answer 1

Todo lo que necesitas hacer es pensar en 3d:

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url(''http://rtjansen.nl/images/.png'');
    -webkit-transform: perspective(100px) rotateX(-25deg);
    -webkit-transform-origin: left center;
    -moz-transform: perspective(100px) rotateX(-25deg);
    -moz-transform-origin: left center;
}

fiddle

Explicación: estás rotando el elemento hacia ti en la parte superior. Pero, la perspectiva (manejada a través del origen transformado, ¡es una función!) Hace que la rotación de la mano izquierda no se traduzca en un movimiento horizontal.

Ver cómo se puede controlar cuál es el tamaño final.

violín con múltiples opciones