Sesgo de transformación de CSS3

¿Alguien sabe cómo lograr un sesgo como este?

¿Usando la nueva propiedad de transformación de CSS?

Como pueden ver, estoy tratando de sesgar ambas esquinas, ¿alguien sabe si esto es posible?

CSS:

#box { width: 200px; height: 200px; background: black; position: relative; -webkit-transition: all 300ms ease-in; } #box:hover { -webkit-transform: rotate(-180deg) scale(0.8); } #box:after, #box:before { display: block; content: "\0020"; color: transparent; width: 211px; height: 45px; background: white; position: absolute; left: 1px; bottom: -20px; -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); } #box:before { bottom: auto; top: -20px; -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); }​ 

HTML:

 

Funciona en Chrome y FF 4: http://jsfiddle.net/rudiedirkx/349×9/

Esto podría ayudar: http://jsfiddle.net/rudiedirkx/349×9/2880/

Y esto también (del comentario de Erwinus): http://css-tricks.com/examples/ShapesOfCSS/

 .red.box { background-color: red; transform: perspective( 600px ) rotateY( 45deg ); } 

Luego HTML:

 

de http://desandro.github.com/3dtransforms/docs/perspective.html

Creo que te refieres a la transformación de webkit. Consulta esta URL en http://www.the-art-of-web.com/css/3d-transforms/ para ayudarte.

Puede usar -webkit-perspective y -webkit-transform juntos.

 

Esto funciona solo en Safari.

Usa este código CSS Establezca los números de acuerdo a su necesidad

 -webkit-transform: translateX(16em) perspective(600px) rotateY(10deg); -moz-transform: translateX(16em) perspective(600px) rotateY(10deg); -ms-transform: translateX(16em) perspective(600px) rotateY(10deg); -o-transform: translateX(16em) perspective(600px) rotateY(10deg); transform: translateX(16em) perspective(600px) rotateY(10deg); 

En caso de que lo desee, utilice la matriz 3d.

  transform:matrix3d( 1,0,1,0.003, 0,1,0,0, 0,0,1,0, 0,0,0,1); 

http://codepen.io/Logo/pen/jEMVpo

 .size{ width: 200px; height: 200px; } .boxContainer{ -webkit-perspective:100; } .box{ background: blue; -webkit-transform-origin-x:0; -webkit-transform: rotateY(10deg); } 

Esto funcionó para mí.

2 métodos más:

  1. Como se ve en https://css-tricks.com/examples/ShapesOfCSS/#trapezoid , puede usar border :

     #box { border-left: 200px solid black; border-top: 50px solid transparent; border-bottom: 50px solid transparent; width: 0; height: 100px; } 

    pero no puede tener contenido, porque todo es frontera.

    Ejemplo: http://jsfiddle.net/rudiedirkx/349×9/3112/

  2. Use la transformación real ‘skew’ de CSS:

     #box { width: 200px; height: 170px; margin-top: 30px; background-color: black; transform: skewY(10deg); position: relative; z-index: 1; /* doesn't work? */ } #box:before { content: ""; display: block; width: 200px; height: 80px; position: absolute; bottom: -40px; left: 0; background-color: black; transform: skewY(-20deg); z-index: -1; /* doesn't work? */ } 

    Sin embargo, parece que no puedo ubicar el pseudo elemento detrás del elemento principal, por lo que el pseudo realmente cae sobre el contenido del elemento principal, si existe alguno.

    Ejemplo: http://jsfiddle.net/rudiedirkx/349×9/3113/