Cómo usar: Zigzag Border CSS
- The preview starts with a zigzag bottom edge; set the number of teeth with Repeats.
- Choose Scallops for rounded teeth or Steps for a staircase.
- Choose Both for a receipt or ticket look.
- Copy the CSS.
Zigzag edges with clip-path
Each tooth is two polygon points: one on the edge, one cut in by the tooth depth. Because x positions are percentages, the teeth always span the full width; set the depth in px so they keep their height. For a receipt look cut both edges with a small depth and many repeats.
More edge shapes are in the Section Divider Generator.
También se busca como: css zigzag edge, jagged edge css, sawtooth border css, scalloped edge css, receipt edge css, ticket edge css.
Herramientas que combinan con: Zigzag Border CSS
- Angled Section CSS — Build angled, slanted or diagonal sections — the classic landing-page look — with one clip-path rule.
- Curved Section Divider — Round off the edge of a hero or section with a curve — convex, scooped, a curved angle, a gentle wave or scallops — using only CSS.
- CSS Triangle Generator — Make a pure-CSS triangle for a tooltip arrow, dropdown caret or speech bubble: choose one of 8 directions, the width, height and color, and copy either the classic border trick or a simpler clip-path version.
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
Preguntas frecuentes
How do I make a zigzag edge in CSS?
Use clip-path: polygon() with points that alternate between the edge and the cut depth across the width. Choose Zigzag here, set the repeats and copy the CSS.
Can I make a torn receipt edge?
Yes — choose Zigzag, the Both edge, a small depth (8–12 px) and 20 or more repeats.
How do I keep teeth the same size on wide screens?
The tooth count is fixed, so teeth get wider on wide screens. For a fixed tooth width, use a repeating mask with conic-gradient instead, or raise the count for desktop in a media query.
¿Puedo instalar Zigzag Border CSS como aplicación web y utilizarla sin conexión?
Sí. Zigzag Border 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.