Dale cualquier forma a un objeto HTML usando máscaras con CSS

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

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.