Introducción

Hasta hace unos años, si deseaba formas de fondo o secciones de un sitio web que fueran algo más que rectángulos, lo más probable era que necesitara un diseñador que le proporcionara una imagen PNG o JPEG estática que se agregaría según fuera necesario, pero CSS Hemos recorrido un largo camino desde entonces, amigos míos.

Cuando estaba trabajando en una actualización del sitio web que dividía el contenido de la página en secciones de fondo de diferentes colores, alternando entre blanco puro y gris suave, la maqueta de diseño que había incluido una sección cuyo borde inferior estaba inclinado hacia arriba y hacia hacia la derecha en lugar de atravesar la página en un ángulo perfecto de 90 grados, como lo hace un elemento de bloque típico.

Ahora podría haberle pedido al diseñador que creara una imagen de fondo para hacer esto por mí, pero en lugar de eso quería ver si podía hacerlo por mi cuenta con el poder de CSS. Y he aquí que pude, con la ruta de clip CSS.

Las formas y elementos visuales interesantes en el DOM ya no son dominio exclusivo de los diseñadores; con herramientas como la ruta de clip CSS, los desarrolladores tienen el poder de remodelar elementos y te mostraré cómo.

Ruta de clip CSS

Si no está tan familiarizado con la propiedad ruta de clip CSS, como yo, crea una región de recorte que establece qué partes de un elemento deben mostrarse. Las partes que están dentro de la región se muestran, mientras que las que están fuera están ocultas.

Una demostración de los documentos de ruta de clip de MDN. Las diferentes opciones de ruta de clip brindan diferentes vistas del globo aerostático y del texto.

La propiedad clip-path puede aceptar una gran variedad de valores:

• , que acepta valores como URL para un elemento SVG con ruta de recorte definida.
• , que acepta valores como margin-box y border-box.
• , que acepta valores como círculo() y rect().
• valores globales, que acepta valores como heredar y revertir.

Los valores y incluso se pueden combinar en una ruta de clip.

/* this CSS combines two different clip path properties */
clip-path: padding-box circle(50px at 0 100px);

Esta publicación no entra en detalles sobre todas las propiedades que clip-path puede aceptar y cómo se pueden combinar para crear formas bastante complejas. Si desea obtener más información y ejemplos de clip=path en acción, le recomiendo comenzar con la documentación de Mozilla.

Una de las propiedades de que acepta el clip-path es polygon(), y esta terminó siendo la solución que necesitaba para mi sección de fondo inclinado.

El polígono que necesitaba recrear con CSS

El fondo de polígono gris que necesitaba crear con CSS.

La imagen de arriba es una captura de pantalla de la sección de fondo gris que necesitaba recrear con la propiedad polígono() de CSS clip-path. Y lo primero que tenía que hacer era crear algunos elementos HTML para aplicarles el CSS.

ruta de clip polígono() vs ruta de clip rect()

Quizás te preguntes por qué elegí usar la propiedad polygon() en lugar de la propiedad rect() con clip-path. Si bien los dos son similares, polygon() puede crear formas poligonales más complejas y ofrece mayor versatilidad para diseños avanzados al aceptar pares de coordenadas para definir cada vértice del polígono, mientras que rect() solo puede manejar formas rectangulares.

Configurar HTML y CSS

El sitio en el que estaba trabajando se basaba en el generador de sitios estáticos Hugo, un marco basado en Go. Hugo utiliza plantillas para representar el HTML del sitio, por lo que el siguiente código de ejemplo debería resultarle relativamente familiar si conoce HTML.

Una nota sobre las plantillas:

Si alguna vez ha usado componentes JSX, Node.js con Pug o Manubrios, o Jekyll, las plantillas de Hugo son similares: elementos HTML con variables y funciones de Go intercaladas con {{ }} para representar la información correcta dondequiera que se encuentren las plantillas. se inyectan.

Aquí está el código de lo que apodé la "sección de rompecabezas" de la página debido a la pieza del rompecabezas en el primer plano de esta sección. Para los propósitos y la claridad de este artículo, reemplacé las variables Go inyectadas en la plantilla con el HTML generado.

único.html

  

    

    

        

          

              

                Lorem ipsum dolor
              
              

                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque.
              
              

                Duis aute irure dolor in reprehenderit
              
              

                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et.
              
          
          

            
        
      
    

Esta sección de código es relativamente compacta, pero merece discusión. Además de los elementos HTML, hay bastantes clases de CSS que provienen de la biblioteca Bootstrap, uno de los marcos CSS originales de código abierto para diseños web responsivos.

Entre las clases personalizadas como about-body, que utilicé para agregar estilos personalizados, hay clases como contenedor, fila, col-12 o col-md-6, mb-5 y mb-3.

Todas las últimas clases son clases Bootstrap, que sirven para hacer que los elementos de texto e imagen en pantalla compartan el ancho de la página cuando la ventana gráfica supera un cierto ancho (col-md-6), o aplicar un margen inferior de una determinada cantidad a las etiquetas

(mb-3 o mb-5).

Sin embargo, las clases Bootstrap no vienen al caso en esta publicación; la clase en la que debemos centrarnos es la sección de rompecabezas que envuelve todo el texto y la imagen de la pieza del rompecabezas.

Esta clase de sección de rompecabezas es donde agregaremos la propiedad clip-path para mostrar el fondo gris claro detrás del texto y la imagen con el diseño ligeramente inclinado hacia arriba y hacia la derecha.

Agregue la ruta del clip CSS para dar forma a la sección del rompecabezas

Como no estaba muy seguro de cómo darle estilo a un

.about-body {
  // this white sets the white background color for the whole webpage
  background-color: white; 

  .puzzle-section {
    // clip-path code copied from the clip-path maker website
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    background-color: light-grey;
    padding: 2rem 0 10rem 0;
  }
}