Cómo usar: Generador de borde zigzag CSS
- La vista previa empieza con un borde inferior en zigzag; ajusta el número de dientes con Repeticiones.
- Elige Festoneado para dientes redondeados o Escalones para una forma de escalera.
- Elige Ambos para lograr un aspecto de recibo o ticket.
- Copia el CSS.
Bordes en zigzag con clip-path
Cada diente son dos puntos del polígono: uno en el borde y otro hacia dentro, según la profundidad del diente. Como las posiciones x son porcentajes, los dientes siempre ocupan todo el ancho; define la profundidad en px para que mantengan su altura. Para un aspecto de recibo, recorta ambos bordes con una profundidad pequeña y muchas repeticiones.
Más formas de borde están en el Generador de separadores de sección.
También se busca como: borde zigzag css, borde en zigzag css, borde irregular css, borde dientes de sierra css, borde festoneado css, borde de recibo css, borde de ticket css.
Herramientas que combinan con: Generador de borde zigzag CSS
- Sección angulada CSS — Crea secciones anguladas, inclinadas o diagonales —el clásico look de las landing pages— con una sola regla clip-path.
- Divisor de sección curvo — Redondea el borde de un hero o una sección con una curva —convexa, cóncava, un ángulo curvo, una suave onda o festones— usando solo CSS.
- Generador de triángulos CSS — Crea un triángulo solo con CSS para la flecha de un tooltip, el caret de un desplegable o un globo de diálogo: elige una de las 8 direcciones, el ancho, el alto y el color, y copia el truco del border clásico o una versión más sencilla con clip-path.
- Generador de clip-path CSS — Recorta imágenes y elementos en cualquier forma: elige una de 15 formas iniciales (triángulo, hexágono, estrella, flecha, chevron, bocadillo, círculo, elipse, inset redondeado…) y luego arrastra los puntos sobre una muestra o sobre tu propia imagen.
Preguntas frecuentes
¿Cómo hago un borde en zigzag en CSS?
Usa clip-path: polygon() con puntos que alternen entre el borde y la profundidad del corte a lo largo del ancho. Elige Zigzag aquí, define las repeticiones y copia el CSS.
¿Puedo hacer un borde de recibo rasgado?
Sí: elige Zigzag, el borde Ambos, una profundidad pequeña (8–12 px) y 20 o más repeticiones.
¿Cómo mantengo el mismo tamaño de los dientes en pantallas anchas?
El número de dientes es fijo, así que los dientes se ensanchan en pantallas grandes. Para un ancho de diente fijo, usa una máscara repetida con conic-gradient en su lugar, o aumenta el número para escritorio con una media query.
¿Puedo instalar Generador de borde zigzag CSS como aplicación web y utilizarla sin conexión?
Sí. Generador de borde zigzag CSS es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.