3 formas de crear bordes en ángulo con SVG

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tutorial, aprenderás tres maneras fáciles de crear bordes en ángulo usando SVG. Para empezar, utilizaremos un SVG en línea, después emplearemos un fondo SVG en un pseudo-elemento, antes de terminar con una mezcla de Sass. ¡Comencemos!

Mira el Screencast

En ángulo ¿Qué?

Cuando digo "bordes angulares" me refiero a cosas como el fondo en el sitio web de Stripe:

O las superposiciones en este sitio web:

Esto sería muy fácil de crear usando una aplicación de gráficos; podrías crear el diseño, exportarlo como un solo gráfico y cargarlo en tu página web. Sin embargo, si quieres más flexibilidad, debes olvidar ese enfoque. Veamos algunas maneras alternativas para lograr bordes angulosos.

Repaso rápido: codificación de SVG a mano

Antes de avanzar, si necesitas recordar lo básico respecto a la codificación manual de SVG, Kezz te puede ayudar:

1. SVG en línea

Empecemos con un SVG, dentro de un contenedor, en nuestro markup:

<div class="hero">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        
    </svg>
</div>

Volveremos a los detalles de lo que hemos hecho en un momento. Ahora añade algunos estilos básicos para darle a nuestra portada algunas dimensiones y un fondo degradado:

body {
    background-color: #eaeaea;   
}

.hero {
    position: relative;
    height: 300px;
    background-image: linear-gradient(#4568dc, #b06ab3);
}

Eso nos da lo siguiente:

Pero vamos a imaginar que queremos tener ese borde inferior como un ángulo que sube hacia la derecha. Vamos a hacer eso con nuestro SVG. En él, vamos a crear un polígono con algunas coordenadas de puntos:

<div class="hero">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon points="0,100 100,0 100,100" />
    </svg>
</div>

Ahora verás un triángulo grande y negro en la parte inferior derecha de tu página. A través de nuestro CSS podemos estilizar ese triángulo para ajustarlo a nuestras necesidades, llenándolo de la misma forma que nuestro fondo para que el "hero" parezca haber sido cortado en la parte inferior:

svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10vw;
    fill: #eaeaea;
}

Eso nos da:

2. Pseudo-elemento + SVG

Nuestro segundo enfoque es mejor con respecto al primero, ya que el contenido dentro del área gris no se cortará superponiendo un triángulo gris. Nuevamente tenemos un simple div contenedor:

1	<div class="hero">
2	</div>

Esta vez controlaremos todo el enmascaramiento desde nuestro CSS, empezando con los estilos del "hero" que utilizamos en la última demostración:

body {
    background-color: #eaeaea;   
}

.hero {
    position: relative;
    height: 300px;
    background-image: linear-gradient(#4568dc, #b06ab3);
}

Ahora añadiremos un pseudo-elemento a nuestro "hero", al que agregaremos el SVG como imagen de fondo. Primero, necesitaremos codificar nuestro SVG para poder usarlo en CSS. Así que toma el código SVG que escribimos la última vez, cambia los puntos a 0,0 100,0 0,100 para voltearlo, dirígete al codificador para SVG y pega el contenido en el cuadro:

Copia el fragmento de código en Ready for CSS y pégalo en los estilos del pseudo-elemento:

.hero::after {

    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 0,100' /%3E%3C/svg%3E");

También puedes añadir un atributo fill = '' si lo deseas, después del atributo viewBox, por ejemplo. Agrega algunas propiedades más para posicionar y dimensionar el pseudo-elemento:

.hero::after {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='tomato' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 0,100' /%3E%3C/svg%3E");   
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: '';
    height: 10vw;
    width: 100%;
    position: absolute;
    bottom: -10vw;
}

Eso nos da esto:

Gracias a nuestros colores Ziggy Stardust podemos ver claramente a nuestro SVG de esta forma. Ahora solo tenemos que colorear el triángulo (utilizando el atributo fill = '') para que sea del mismo color que el púrpura en la parte inferior del degradado:

La importancia de las unidades VW

Existe una razón por la que utilizamos unidades vw para la altura de nuestro SVG: queremos que el ángulo de nuestro triángulo permanezca consistente sin importar el ancho de la ventana. Si utilizáramos unidades en px, la altura del triángulo no cambiaría en las pantallas más estrechas, lo que hariá que el ángulo del triángulo fuera más agudo. ¡Inténtalo tú mismo!

3. El mezclado en Sass

Este enfoque final utiliza una mezcla en Sass para hacer todo el trabajo pesado, pero esencialmente logra lo que hicimos en el ejemplo anterior. Dirígete al repositorio de Angled Edges en GitHub, toma la mezcla e inclúyela en tu proyecto (voy a pegarlo todo en la ventana de SCSS de un proyecto CodePen).

Después, agrega a nuestro viejo amigo el div "hero" a tu markup. Añade los estilos básicos también, para que obtengamos el efecto degradado de 300px.

A continuación, dentro de nuestro .hero agregamos el mixin:

1	@include angled-edge();

Los parámetros que requerimos son los siguientes: necesitamos que nuestro triángulo esté afuera outside del "hero", en la parte inferior bottom. La posición del punto donde empieza el ángulo es abajo a la derecha lower right, el color que deseamos es púrpura #b06ab3, y entonces la altura del triángulo será 100. La limitación de esto es que el mixin no acepta valores relativos para la altura o el ancho.

Nuestro mixin luce así:

1	@include angled-edge("outside bottom", "lower right", #b06ab3, 100);

Y esto es lo que obtenemos:

Para obtener más detalles sobre los parámetros disponibles, revisa el repositorio en GitHub. Gracias a Joseph Fusco por su arduo trabajo.

Conclusión

Allí lo tenemos; tres métodos para obtener bordes en ángulo. Cada uno tiene sus méritos, y la práctica de cada uno te dará una sólida comprensión de cómo se pueden manipular los SVG para un efecto visual.