Comment utiliser : 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.
Aussi recherché comme : css zigzag edge, jagged edge css, sawtooth border css, scalloped edge css, receipt edge css, ticket edge css.
Outils complémentaires : 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.
Questions fréquentes
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.
Puis-je installer Zigzag Border CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Zigzag Border CSS est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.