Cara memakai
- Ketik Nama kelas untuk aturan itu, misalnya segitiga, lalu pilih Bentuk.
- Untuk polygon, seret titik di Pratinjau, atau ketik x dan y-nya di kolomnya. Gunakan Tambah titik dan Hapus titik terakhir untuk mengubah jumlahnya.
- Untuk inset, circle atau ellipse, ketik angkanya di kolom. Pratinjau langsung digambar ulang.
- Salin aturan CSS ke lembar gaya Anda, lalu pasang kelasnya pada elemen yang ingin dipotong.
Empat bentuk
CSS Shapes Module mendefinisikan bentuk dasar yang bisa dipakai clip-path. Poligon adalah daftar titik, masing-masing berupa pasangan posisi, dan titik-titik itu dihubungkan sesuai urutan yang Anda tulis. Inset memotong kotak pada empat jarak, yang ditulis atas, kanan, bawah dan kiri. Lingkaran atau elips punya jari-jari, atau dua jari-jari, dan pusatnya ditulis setelah kata at.
- polygon(50% 0%, 100% 100%, 0% 100%) punya tiga titik, masing-masing dengan x dan y dalam persen.
- inset(10% 20% 10% 20%) memotong 10% dari atas dan bawah, serta 20% dari kiri dan kanan.
- circle(60px at 50% 50%) punya jari-jari 60 px dan pusatnya di tengah kotak.
Persentase dan kotak acuan
Persentase pada titik, inset atau pusat adalah bagian dari kotak, dan spesifikasi menghitungnya terhadap ukuran kotak acuan yang dipakai. CSS Masking Module menyatakan bahwa jika tidak ada kotak acuan yang diberikan, kotak tepi (border box) yang dipakai. Bagian elemen di luar bentuk tidak digambar.
Yang tidak ditulis halaman ini
- Aturan pengisian (fill rule) untuk poligon, klausa round pada inset, serta bentuk url() atau path() dari clip-path.
- Jari-jari dalam persen untuk lingkaran atau elips. Teks bentuk yang dibaca halaman ini tidak menjelaskan cara menghitungnya, sehingga jari-jari ditulis dalam px.
Contoh kerja: segitiga
Segitiga adalah poligon dengan tiga titik: tengah atas, kanan bawah dan kiri bawah kotak. Tabel memberi setiap titik, dan aturan yang ditulis halaman ini adalah .segitiga dengan clip-path yang diatur ke polygon(50% 0%, 100% 100%, 0% 100%).
| Titik | x | y |
|---|---|---|
| 1 | 50% | 0% |
| 2 | 100% | 100% |
| 3 | 0% | 100% |
Pertanyaan yang sering diajukan
Mengapa jari-jari lingkaran atau elips dalam piksel?
Teks bentuk tidak menjelaskan cara persentase jari-jari dihitung untuk circle() dan ellipse(), sehingga halaman ini hanya menyediakan piksel. Jari-jari dalam piksel punya satu arti, dan pratinjau menggambarnya sesuai ukuran kotak di layar Anda.
Mengapa bentuknya hilang saat saya mengetik nilai yang salah?
Halaman ini menampilkan alasannya dengan warna merah dan tidak menggambar bentuk, supaya Anda tidak pernah mendapat aturan yang salah. Nilai di luar rentangnya, atau inset yang tidak menyisakan bagian kotak, adalah penyebab yang paling umum.
Apakah urutan titik itu penting?
Ya. Titik ditulis sesuai urutan yang Anda masukkan, dan urutan itulah yang membentuk garis luarnya. Memindahkan satu titik mengubah bentuknya tanpa mengubah titik yang lain.
Apa bedanya clip-path dengan border-radius?
clip-path memotong elemen menjadi sebuah bentuk, sehingga bagian di luarnya tidak digambar, sedangkan border-radius hanya membulatkan sudut. Kotak acuan clip-path adalah kotak tepi, kecuali jika kotak lain ditentukan.
Berapa titik yang bisa dimiliki poligon di sini?
Dari 3 sampai 20 titik. Titik yang lebih banyak memberi garis luar yang lebih halus, tetapi aturannya menjadi lebih panjang, dan pratinjau bekerja dengan sampai 20 pegangan.
Apakah CSS yang saya buat dikirim ke mana pun?
Tidak. Pratinjau dan aturannya dibuat di peramban Anda. Tidak ada yang disimpan atau dikirim ke server kami, jadi salin CSS-nya sebelum meninggalkan halaman.
Sumber
- W3C (dalam bahasa Inggris): CSS Shapes Module Level 1, basic shapes
- W3C (dalam bahasa Inggris): CSS Masking Module Level 1, the clip-path property
Angka dan teks terakhir diperiksa pada Kamis, 12 November 2026.