CSS: Máscara con angulación para dar dinamismo a tus imágenes

En este artículo veremos como crear una máscara con angulación y aplicarla sobre las imágenes de tu sitio. Para ello, utilizaremos la propiedad transform de CSS. En tan sólo unos pocos pasos, habremos logrado este efecto.

La idea es simple: Tenemos tres elementos anidados. El nivel superior actúa como un contenedor de un tamaño determinado que encaja en el diseño, por ejemplo, el header del sitio. El segundo elemento será rotado X grados en el sentido de las agujas del reloj, y el tercer elemento será rotado -X grados, en el sentido contrario a las agujas del reloj, por lo que quedará en forma horizontal. Es importante resaltar que este efecto sólo será visible en navegadores que actualmente soporten la rotación por CSS

El código, entonces, se vería así:

Lo importante es que le des valor hidden a la propiedad overflow en los tres elementos (aunque no es indispensable en el caso del tercero de ellos) . El primer elemento no está rotado y se mantendrá con su mismo ancho y altura. El segundo elemento está rotado en el sentido del reloj y el tercer elemento a la inversa, rotándose la misma cantidad de grados que el segundo elemento. La ubicación de los elementos es probable que deba ser ajustada utilizando los márgenes de los elementos. Aquí puedes aplicarle el estilo que desees. Este es el CSS restante:


.box{
width:700px;
height:300px;
background:#ccc;
overflow:hidden;
margin:1em 0;
}
.box .inner{
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
width:300px;
height:450px;
margin-top:-70px;
margin-right:100px;
overflow:hidden;
background:#aaa;
float:right;
border:3px solid #fff;
}
.box .inner .content{
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
width:500px;
height:320px;
margin-top:60px;
margin-left:-80px;
overflow:hidden;
background:#f1f1f1;
}