Cara menggunakan Pembuat Border Zigzag CSS
- Pratinjau dimulai dengan tepi bawah zigzag; atur jumlah gigi dengan Repeats.
- Pilih Scallops untuk gigi melengkung atau Steps untuk tangga.
- Pilih Both untuk tampilan struk atau tiket.
- Salin CSS-nya.
Tepi zigzag dengan clip-path
Setiap gigi dibentuk dari dua titik polygon: satu di tepi, satu lagi masuk sedalam gigi. Karena posisi x dalam persen, gigi selalu memenuhi lebar penuh; atur kedalaman dalam px agar tingginya tetap. Untuk tampilan struk, potong kedua tepi dengan kedalaman kecil dan jumlah repeat yang banyak.
Bentuk tepi lainnya tersedia di Section Divider Generator.
Juga dicari sebagai: border zigzag css, tepi zigzag css, jagged edge css, border gergaji css, tepi scallop css, tepi struk css, tepi tiket css.
Tool yang cocok dipakai bersama Pembuat Border Zigzag CSS
- Angled Section CSS — Buat section miring, angled, atau diagonal — tampilan klasik untuk landing page — dengan satu aturan clip-path.
- Curved Section Divider — Lengkungkan tepi hero atau section dengan kurva — cembung, cekung, sudut melengkung, gelombang halus, atau scallop — hanya menggunakan CSS.
- Generator Segitiga CSS — Buat segitiga murni CSS untuk panah tooltip, caret dropdown, atau balon ucapan: pilih salah satu dari 8 arah, atur lebar, tinggi, dan warnanya, lalu salin trik border klasik atau versi clip-path yang lebih sederhana.
- Generator CSS Clip-path — Potong gambar dan elemen menjadi bentuk apa pun: pilih salah satu dari 15 bentuk awal — segitiga, heksagon, bintang, panah, chevron, balon bicara, lingkaran, elips, persegi rounded inset… — lalu geser titiknya di atas contoh atau gambarmu sendiri.
Pertanyaan yang sering diajukan
Bagaimana cara membuat tepi zigzag di CSS?
Gunakan clip-path: polygon() dengan titik-titik yang bergantian antara tepi dan kedalaman potongan di sepanjang lebar. Pilih Zigzag di sini, atur repeats, lalu salin CSS-nya.
Bisakah membuat tepi struk yang sobek?
Bisa. Pilih Zigzag, tepi Both, kedalaman kecil (8–12 px), dan 20 repeat atau lebih.
Bagaimana agar ukuran gigi tetap sama di layar lebar?
Jumlah gigi bersifat tetap, sehingga gigi akan makin lebar di layar lebar. Untuk lebar gigi yang tetap, gunakan repeating mask dengan conic-gradient, atau tambah jumlah gigi untuk desktop lewat media query.
Bisakah saya memasang Pembuat Border Zigzag CSS sebagai aplikasi web dan memakainya offline?
Bisa. Pembuat Border Zigzag CSS adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.