CSS3 Transform Skew One Side

¿Es posible crear “CSS3 Transform Skew One Side”

Encontré una solución, pero no es útil para mí, porque necesito usar una imagen para fondo (no color)

#skewOneSide { border-bottom: 40px solid #FF0000; border-left: 50px solid rgba(0, 0, 0, 0); height: 0; line-height: 40px; width: 100px; } 

Incluso este JsFiddle tampoco es útil (el área sesgada debe ser transparente)

Prueba esto:

Para invertir la imagen, utiliza un div nested para la imagen y dale el valor de sesgo opuesto. Entonces, si tiene 20deg en el padre, entonces puede darle al div (de imagen) nested un valor sesgado de -20deg.

 .container { overflow: hidden; } #parallelogram { width: 150px; height: 100px; margin: 0 0 0 -20px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; overflow: hidden; position: relative; } .image { background: url(http://placekitten.com/301/301); position: absolute; top: -30px; left: -30px; right: -30px; bottom: -30px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); } 
 

Sé que esto es antiguo, pero me gustaría sugerir el uso de un gradiente lineal para lograr el mismo efecto en lugar de compensación de margen. Esto mantendrá cualquier contenido en su lugar original.

http://jsfiddle.net/zwXaf/2/

HTML

  

CSS

 /* reset */ ul, li, a { margin: 0; padding: 0; } /* nav stuff */ ul, li, a { display: inline-block; text-align: center; } /* appearance styling */ ul { /* hacks to make one side slant only */ overflow: hidden; background: linear-gradient(to right, red, white, white, red); } li { background-color: red; transform:skewX(-20deg); -ms-transform:skewX(-20deg); -webkit-transform:skewX(-20deg); } li a { padding: 3px 6px 3px 6px; color: #ffffff; text-decoration: none; width: 80px; transform:skewX(20deg); -ms-transform:skewX(20deg); -webkit-transform:skewX(20deg); } 

puedes hacer eso usando transforma y transforma orígenes.

La combinación de varios transfroms da un resultado similar. Espero que le sea útil. 🙂 Vea estos ejemplos para transformaciones más simples. esto tiene un punto a la izquierda:

 div { width: 300px; height:200px; background-image: url('http://placecage.com/g/300/200'); -webkit-transform: perspective(300px) rotateX(-30deg); -o-transform: perspective(300px) rotateX(-30deg); -moz-transform: perspective(300px) rotateX(-30deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; margin: 10px 90px; } 
 

Intenta con el :before era bastante cercano, lo único que tenías que cambiar era utilizar el sesgo en lugar de los bordes: http://jsfiddle.net/Hfkk7/1101/

Editar: Su enfoque de borde también funcionaría, lo único que hizo mal fue tener el elemento anterior en la parte superior de su div, por lo que el borde transparente no se muestra. Si hubiera colocado el pseudo elemento a la izquierda de su div, todo habría funcionado también: http://jsfiddle.net/Hfkk7/1102/