So nutzt du: 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.
Auch gesucht als: css zigzag edge, jagged edge css, sawtooth border css, scalloped edge css, receipt edge css, ticket edge css.
Passende Tools zu: 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.
Häufige Fragen
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.
Kann ich Zigzag Border CSS als Web-App installieren und offline nutzen?
Ja. Zigzag Border CSS ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.