Crear un patrón de fondo en zigzag con CSS

Introducción

En este laboratorio, aprenderemos cómo crear un patrón de fondo en zigzag utilizando CSS. Al utilizar linear-gradient() y ajustar el background-size y el background-position, podremos crear un patrón visualmente atractivo que se puede utilizar en varios elementos de un sitio web. Este laboratorio ayudará a mejorar nuestras habilidades en CSS y nos dará una mejor comprensión de cómo utilizar CSS para crear diseños únicos.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35258{{"Patrón de fondo en zigzag"}} css/colors -.-> lab-35258{{"Patrón de fondo en zigzag"}} css/width_and_height -.-> lab-35258{{"Patrón de fondo en zigzag"}} css/positioning -.-> lab-35258{{"Patrón de fondo en zigzag"}} css/backgrounds -.-> lab-35258{{"Patrón de fondo en zigzag"}} end

Patrón de fondo en zigzag

index.html y style.css ya se han proporcionado en la máquina virtual.

Para crear un patrón de fondo en zigzag, siga los siguientes pasos:

Establezca un fondo blanco utilizando background-color.
Cree las partes de un patrón en zigzag utilizando background-image con cuatro valores de linear-gradient().
Especifique el tamaño del patrón utilizando background-size.
Coloque las partes del patrón en las ubicaciones correctas utilizando background-position.
Para repetir el patrón, utilice background-repeat.
Nota: La altura y el ancho del elemento se fijan solo con fines de demostración.

A continuación, se muestra un fragmento de código de ejemplo:

<div class="zig-zag"></div>

.zig-zag {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%);
  background-position:
    -30px 0,
    -30px 0,
    0 0,
    0 0;
  background-size: 60px 60px;
  background-repeat: repeat;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Patrón de fondo en zigzag. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.