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

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.

HTML:

<div id="fotoPerfil_cont">
    <div class="fotoPerfil_mask" id="user_fotoPerfil"></div>
</div>

CSS:

#fotoPerfil_cont {
    float: left;
    width: 250px;
    height: 215px;
    padding: 4px;
    background-image: url("path/to/mask.png");
    background-size: 250px 215px;
    box-sizing: border-box;
}
.fotoPerfil_mask {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: url("path/to/mask.png");
    -webkit-mask-size: 242px 207px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
}
#user_fotoPerfil {
    background-image: url("path/to/user_profile_image.png");
}

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.