So nutzt du: Zackenrand CSS
- Die Vorschau beginnt mit einer Zickzack-Unterkante; passe die Anzahl der Zacken mit Wiederholungen an.
- Wähle Wellen für runde Zacken oder Stufen für eine Treppenform.
- Wähle Beide für einen Kassenbon- oder Ticket-Look.
- Kopiere das CSS.
Zickzack-Kanten mit clip-path
Jeder Zacken besteht aus zwei Polygonpunkten: einem auf der Kante und einem, der um die Zackentiefe eingeschnitten ist. Da die x-Positionen in Prozent angegeben werden, überspannen die Zacken immer die volle Breite; lege die Tiefe in px fest, damit sie ihre Höhe behalten. Für einen Kassenbon-Look schneide beide Kanten mit geringer Tiefe und vielen Wiederholungen.
Weitere Kantenformen findest du im Section Divider Generator.
Auch gesucht als: css zickzack kante, gezackter rand css, sägezahn border css, wellenrand css, kassenbon rand css, ticket rand css.
Passende Tools zu: Zackenrand CSS
- Schräge Section CSS — Baue schräge, angewinkelte oder diagonale Abschnitte – der klassische Landingpage-Look – mit einer einzigen clip-path-Regel.
- Gewölbte Abschnittstrennung — Runde die Kante eines Heroes oder Abschnitts mit einer Kurve ab – konvex, nach innen gewölbt, als gebogener Winkel, sanfte Welle oder Bögen – und zwar nur mit CSS.
- CSS Dreieck Generator — Erstelle ein reines CSS-Dreieck für einen Tooltip-Pfeil, ein Dropdown-Caret oder eine Sprechblase: Wähle eine von 8 Richtungen, Breite, Höhe und Farbe und kopiere entweder den klassischen Border-Trick oder die einfachere clip-path-Variante.
- CSS Clip-path Generator — Schneide Bilder und Elemente in beliebige Formen: Wähle eine von 15 Startformen — Dreieck, Sechseck, Stern, Pfeil, Chevron, Sprechblase, Kreis, Ellipse, abgerundetes Inset … — und ziehe die Punkte über ein Beispielbild oder dein eigenes.
Häufige Fragen
Wie erstelle ich eine Zickzack-Kante in CSS?
Verwende clip-path: polygon() mit Punkten, die über die Breite abwechselnd zwischen Kante und Schnitttiefe liegen. Wähle hier Zickzack, lege die Wiederholungen fest und kopiere das CSS.
Kann ich einen gerissenen Kassenbon-Rand erstellen?
Ja — wähle Zickzack, die Kante Beide, eine geringe Tiefe (8–12 px) und 20 oder mehr Wiederholungen.
Wie behalte ich die Zackengröße auf breiten Bildschirmen bei?
Die Anzahl der Zacken ist fest, daher werden die Zacken auf breiten Bildschirmen breiter. Für eine feste Zackenbreite verwende stattdessen eine wiederholende Maske mit conic-gradient oder erhöhe die Anzahl für Desktop in einer Media Query.
Kann ich Zackenrand CSS als Web-App installieren und offline nutzen?
Ja. Zackenrand 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.