Cara menggunakan Curved Section Divider
- Pratinjau dimulai dengan kurva cembung di tepi bawah; pilih Scoop untuk kebalikannya.
- Coba Curved angle, Wave atau Scallops lalu atur jumlah pengulangannya.
- Atur kedalaman kurva, dan tepinya (bawah, atas, atau keduanya).
- Salin CSS-nya.
Kurva dengan clip-path
Kurvanya berupa polygon() dengan puluhan titik yang mengikuti busur, masing-masing ditetapkan dengan calc(100% - …) agar kedalamannya tetap dalam px atau vw. Untuk bagian bawah berbentuk elips yang sederhana, kamu juga bisa memakai border-radius: 0 0 50% 50% / 0 0 80px 80px, tetapi cara itu ikut melengkungkan sudut-sudut kotak konten; versi clip-path hanya memotong bagian tepinya.
Untuk gelombang berlapis, lihat SVG Wave Generator; untuk sudut dan zigzag, gunakan Section Divider Generator.
Juga dicari sebagai: curved section css, css curved bottom, curved hero section css, css curve divider, rounded section bottom css, css arc section.
Tool yang cocok dipakai bersama Curved Section Divider
- Angled Section CSS — Buat section miring, angled, atau diagonal — tampilan klasik untuk landing page — dengan satu aturan clip-path.
- Pembuat Border Zigzag CSS — Buat tepi zigzag, gergaji, scallop, atau bertingkat pada section, kartu, kupon, dan desain struk.
- Generator Border Radius — Bulatkan sudut kotak mana pun: geser satu slider untuk semua sudut atau atur tiap sudut secara terpisah, beralih ke sudut elips untuk bentuk blob dan daun, lalu salin CSS border-radius terpendek yang valid.
- 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 bagian bawah section yang melengkung?
Pilih Curve lalu salin CSS-nya: sebuah clip-path polygon akan membentuk kurva di sepanjang tepi bawah. Alternatifnya, border-radius: 0 0 50% 50% / 0 0 80px 80px memberikan bagian bawah elips yang sederhana.
Bisakah kurvanya mengarah ke dalam?
Bisa — Scoop membuat tepi melengkung ke dalam, sehingga section berikutnya menonjol ke atas ke dalam section ini.
Apakah kurva polygon cukup halus?
Cukup. Kurva ini memakai puluhan titik; pada ukuran normal tampilannya sama dengan kurva SVG.
Bisakah saya memasang Curved Section Divider sebagai aplikasi web dan memakainya offline?
Bisa. Curved Section Divider 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.