Como 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.
Também pesquisado como: css zigzag edge, jagged edge css, sawtooth border css, scalloped edge css, receipt edge css, ticket edge css.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o Zigzag Border CSS como um aplicativo da web e usá-lo offline?
Sim. O Zigzag Border CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.