Recientemente en uno de nuestros proyectos, nos encontramos con el requerimiento de diseño de poner la imagen de perfil de un usuario en una red social, con una forma de hexágono. Esta foto de perfil viene desde un servidor en la nube, por lo que es dinámica y diferente para cada usuario. Luego de intentar varias técnicas de CSS para dibujar formas, efectivamente lográbamos obtener un hexágono, pero ahora el problema era que la foto tomara esa forma al cargarse. Fue así como nos encontramos con una propiedad de CSS: mask-image
CSS: mask-image
Esta propiedad nos permite definir una o varias imágenes como máscaras del elemento al cual se la estamos asignando. Además de imágenes, esta propiedad nos permite asignar como máscaras gradientes lineales, circulares o SVG. En esta entrada nos centraremos en el uso de imágenes.
Primero, agregaremos el HTML que necesitamos. Como queremos que se vea un borde alrededor de la imagen, crearemos dos elementos div:
- fotoPerfil_cont: Este div contendrá el borde que queremos darle con la misma forma de hexágono.
- fotoPerfil_mask: A este div se le asignará como background-image la foto del perfil del usuario, y es el que usaremos para aplicar la propiedad mask-image
Esta es la máscara que usamos. Es un PNG con fondo transparente, donde la parte en blanco es lo que queremos que se vea, y la parte transparente lo que se va a ocultar. Ponemos la imagen sobre un fondo de color para que pueda visualizarse.
JSFiddle
Puedes ver un ejemplo funcionando en el siguiente Fiddle. Siéntete libre de usarlo.
Si te gustó, tienes alguna pregunta o sabes otro modo de conseguir este mismo resultado, puedes dejarnos un comentario más abajo. Te agradecemos compartir este post. Saludos.