Cara menggunakan Generator Section Divider
- Pilih bentuk: angle, arrow, notch, curve, scoop, curved angle, wave, zigzag, scallops, atau steps.
- Pilih tepi yang akan dipotong: bawah, atas, atau keduanya (kedua tepi dengan sudut menghasilkan pita miring klasik).
- Atur kedalaman potongan. Gunakan px atau vw agar sudutnya tetap saat section membesar; untuk gelombang dan zigzag, atur jumlah pengulangan.
- Salin CSS ke section kamu. Aturan opsional akan menarik section berikutnya ke atas, di bawah potongan, sehingga tidak ada celah.
Cara kerja section miring
Section tetap memakai kotak persegi panjang biasa; clip-path: polygon() hanya menyembunyikan segitiga (atau lengkungan, atau zigzag) di sepanjang tepinya. Setiap titik di tepi potongan memakai calc(100% - 80px), jadi potongannya selalu sedalam 80 px, baik di hero yang pendek maupun section yang panjang, dan sudutnya tidak berubah saat konten bertambah.
.section {
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
padding-bottom: calc(80px + 3rem);
}
.section + * { margin-top: -80px; padding-top: calc(80px + 3rem); }Aturan kedua menggeser section berikutnya naik ke bawah potongan, sehingga latar belakangnya sendiri, bukan latar halaman, yang mengisi celah miring. z-index: 1 menjaga section yang dipotong tetap di atas. Lengkungan, gelombang, dan scallop digambar sebagai poligon dengan banyak titik, yang dirender mulus di semua browser modern.
clip-path vs. skew vs. SVG
transform: skewY() juga memiringkan section, tapi kontennya ikut miring, jadi setiap elemen anak harus di-unskew. Divider SVG membutuhkan elemen tambahan. clip-path memotong section itu sendiri, termasuk latar, gradien, dan foto, hanya dengan satu aturan. Untuk gelombang organik yang berlapis, gunakan SVG Wave Generator; untuk memudarkan tepi secara halus alih-alih memotongnya, gunakan CSS Mask Generator.
Juga dicari sebagai: section miring css, css section miring, diagonal section css, css shape divider, section melengkung css, zigzag border css, clip-path section divider, css section separator.
Tool yang cocok dipakai bersama Generator Section Divider
- 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.
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Generator Blob SVG — Buat bentuk blob organik yang halus untuk background hero, avatar, dan ilustrasi.
- 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.