Usar máscaras CSS para crear bordes irregulares

Estaba trabajando en un proyecto que tenía este elegante borde dentado en la parte inferior de una imagen de banner.

¡Es algo que me hizo pensar por un segundo y aprendí algo en el proceso! Pensé en escribir cómo lo abordé para que puedas usarlo en tus propios proyectos.

Comencé con una buena imagen HTML antigua en un elemento contenedor:

div  img src="path-to-image.jpg" //div

Luego use su ::afterpseudo elemento para colocarle una imagen de fondo repetida:

.jagged-wrapper::after {  content: "";  background-image: url('data:image/svg+xml;utf-8,svg  viewBox="0 0 1 1" preserveAspectRatio="none"polygon points="1,0 1,1 0,1 "//svg');  background-size: 30px 30px;  width: 100%;  height: 30px;  position: absolute;  bottom: 0px;  right: 0;  z-index: 2;}

¿Esa imagen de fondo? Es código SVG convertido a un URI de datos. Aquí está el código SVG original. Chris tiene un bonito vídeo donde explica esa conversión.

svg  viewBox="0 0 1 1" preserveAspectRatio="none"  polygon points="1,0 1,1 0,1 "//svg

“¡Aquí vamos!” Pensé.

Si bien eso ciertamente funciona, caramba, es una gran molestia. Es difícil leer el marcado SVG en CSS de esa manera. Además, es molesto tener que acordarse de citarlos (p. ej url('data:image/svg+xml'...).). Claro, podemos codificar el SVG en base64 para evitar eso, pero eso es aún más molesto. Además, el SVG debe rellenarse con el mismo color de fondo que la imagen (o donde quiera que se use), o de lo contrario no funcionará.

Espera, ¿no es para eso el enmascaramiento? ¡Si! Sí, para eso sirve el enmascaramiento.

Eso me llevó a un nuevo enfoque: usar una imagen como la de arriba como máscara CSS para que las partes “faltantes” de la imagen del banner en realidad desaparecieran. En lugar de dibujar triángulos del color de fondo encima del banner, deberíamos enmascarar esos triángulos del banner por completo y dejar que se vea el fondo real. ¡De esa manera, funciona en cualquier fondo!

El enmascaramiento se admite prácticamente en todas partes, al menos en la forma sencilla de la que hablo aquí. También estamos hablando de algo que se puede implementar con una mejora progresiva; Si las máscaras no son compatibles con un navegador determinado, entonces simplemente no obtendrás el efecto de diente de sierra. Definitivamente no es el fin del mundo.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Móvil/Tableta

Una forma en que funciona una máscara CSS es proporcionar una imagen con un canal alfa como archivo mask-image. El elemento subyacente, el que está siendo enmascarado, se vuelve (semi)transparente en la medida en que lo mask-imagedicta el canal alfa. Entonces, si la imagen de su máscara es una tetera blanca sobre un fondo transparente, entonces el elemento enmascarado se cortará a la forma de la tetera y todo lo que esté afuera quedará oculto.

El enmascaramiento puede ser un concepto complicado de similar. Sarah Drasner tiene un artículo que profundiza en el enmascaramiento, incluido en qué se diferencia del recorte. Las máscaras pueden hacer mucho más de lo que cubrimos aquí. Consulte las especificaciones, caniuse y MDN para obtener aún más información.

Lo que necesitamos es una única imagen similar a un “diente de sierra” similar al SVG anterior, donde la mitad superior izquierda esté llena de blanco y la parte inferior izquierda quede semitransparente. E, idealmente, esa imagen no sería un SVG real, ya que eso nos llevaría de nuevo al feo lío de URI de datos en el que estábamos antes.

En este punto, podrías estar pensando: “¡Oye, simplemente incrusta el SVG en el CSS directamente, define una máscara en él y luego apunta el CSS al ID de la máscara en el SVG!”.

¡Buena idea! Y ciertamente es factible si puedes editar el HTML. Sin embargo, para mi proyecto específico, estaba trabajando en WordPress y realmente quería limitar mis cambios a CSS puro en lugar de inyectar partes adicionales en HTML. Habría sido mucho más trabajo. No creo que esto sea infrecuente; Para un cambio de presentación como este, es útil no tener que editar el HTML. Estamos mayormente de acuerdo con la idea de evitar elementos envolventes semánticamente sin valor solo para proporcionar ganchos de estilo, pero creo que eso también se aplica a agregar marcado SVG completo al documento… o incluso una plantilla de WordPress.

En su lugar, podemos usar un CSS lineal degradado para crear una forma de triángulo:

.el {  linear-gradient(    to bottom right,    white,    white 50%,    transparent 50%,    transparent  );}

Aquí está sobre un fondo radial, para que puedan ver que es realmente transparente:

¡Excelente! Podemos usarlo como mask-imageen nuestro banner, ¿verdad? Necesitamos establecer mask-sizecuál es como background-sizey mask-repeatcomo background-repeat, ¿y estamos bien?

lamentablemente no. No tan bien.

La primera razón es que, a menos que estés usando Firefox, probablemente no verás ninguna máscara en el ejemplo anterior. Esto se debe a que Blink y WebKit todavía solo permiten el enmascaramiento con un prefijo de proveedor al momento de escribir este artículo. Eso significa que necesitamos -webkit-versiones con prefijo de todo.

Dejando a un lado el prefijo del proveedor, lo que estamos haciendo también es conceptualmente incorrecto. Si limitamos la máscara solo a la franja inferior de la imagen con mask-size, entonces el resto de la imagen no tiene nada mask-image, lo que la máscara por completo. Como resultado, no podemos usar el diente de sierra solo como máscara. Lo que necesitamos es mask-imageun rectángulo del tamaño de la imagen con solo un diente de sierra en la parte inferior.

Algo como esto:

Lo hacemos con dos imágenes degradadas. La primera imagen es el mismo triángulo de dientes de sierra que el anterior, que está configurado repeat-xy colocado de bottommodo que se repite solo a lo largo del borde inferior de la imagen. La segunda imagen es otro degradado que es transparente para los 30 píxeles inferiores (para no interferir con el diente de sierra), opaco encima (que se muestra yendo de negro a blanco en la demostración) y ocupa todo el tamaño del elemento. .

Así que ahora tenemos esta pieza en forma de cuña, con un solo diente de sierra triangular en la parte inferior, y ocupa toda la altura de la imagen de nuestro banner en dos piezas separadas. Finalmente, podemos usar estas piezas mask-imagerepitiéndolas horizontalmente a lo largo de nuestra imagen, y debería tener el efecto que queremos:

¡Y ahí lo tenemos!