Refiriéndose al tipo de apariencia de las imágenes que se ven en este sitio - http: // sl .dream-theme.com / html / albums-light.html (No estoy involucrado de ninguna manera con este tema de WP, solo proporciono un ejemplo). El autor está usando jRaphael para crear "cortes de ruta", que es un enfoque agradable y seguro para el navegador, pero me gustaría evitar incluir una biblioteca adicional únicamente para ese propósito.

1
Staffan Estberg 22 mar. 2012 a las 16:48
Con -webkit-mask, pero la compatibilidad del navegador es deficiente (no estándar).
 – 
mddw
22 mar. 2012 a las 19:48
Utilice la propiedad de clip o bordes transparentes para lograr este efecto.
 – 
Paul Sweatte
22 may. 2012 a las 23:06

1 respuesta

La mejor respuesta

Muy básica:

http://dabblet.com/gist/2874826

Utiliza pseudo elementos css para enmascarar la imagen (compatibilidad con el navegador bastante descendente: se representará como una imagen cuadrada en los navegadores heredados, ¿probablemente nbd?)

Si se necesitan sombras / bordes / cosas, puede agregar un envoltorio adicional para simular los bordes inclinados utilizando más pseudo elementos o un cuadro manipulado (transformado), o algo así.

2
Thomas 5 jun. 2012 a las 17:02