Cara menggunakan Angled Section CSS
- Pratinjau awalnya menampilkan sisi bawah yang miring. Pilih Both untuk pita miring, atau Top.
- Gunakan Flip horizontally untuk mengubah arah kemiringan.
- Atur kedalaman potongan dalam px (sudut tetap) atau vw (menyesuaikan lebar layar).
- Salin CSS-nya.
Section miring tanpa skew
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%) memiringkan sisi bawah section sementara teks di dalamnya tetap lurus — berbeda dengan transform: skewY(), yang ikut memiringkan kontennya. Tarik section berikutnya ke atas di bawah sudut itu dengan margin negatif agar background-nya mengisi celahnya.
Bentuk tepi lain — lengkung, panah, gelombang, dan zigzag — ada di Section Divider Generator.
Juga dicari sebagai: css section miring, slanted section css, css section diagonal, css background miring, skewed section css, css diagonal divider.
Tool yang cocok dipakai bersama Angled Section CSS
- Curved Section Divider — Lengkungkan tepi hero atau section dengan kurva — cembung, cekung, sudut melengkung, gelombang halus, atau scallop — hanya menggunakan CSS.
- Pembuat Border Zigzag CSS — Buat tepi zigzag, gergaji, scallop, atau bertingkat pada section, kartu, kupon, dan desain struk.
- Generator Wave SVG — Rancang pemisah bagian bergelombang untuk landing page: tambah atau hapus gelombang (hingga 6, masing-masing dengan warna, opasitas, dan bentuk sendiri), atur jumlah puncak, tinggi, dan kehalusan, pilih warna, serta tentukan apakah gelombang berada di atas atau bawah.
- 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 memiringkan bagian atas dan bawah section sekaligus?
Pilih edge Both: polygon akan memotong bagian atas dan bawah secara sejajar, menghasilkan pita miring — clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%).
Sebaiknya pakai skewY atau clip-path?
clip-path. skewY ikut memiringkan teks dan gambar di dalam section, jadi kamu perlu skew kedua yang terbalik pada konten; clip-path hanya memotong tepinya.
Bagaimana cara menjaga sudut tetap sama di mobile?
Gunakan kedalaman potongan dalam vw: potongan akan menyesuaikan lebar layar, sehingga sudutnya tetap sama di setiap lebar.
Bisakah saya memasang Angled Section CSS sebagai aplikasi web dan memakainya offline?
Bisa. Angled Section 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.