Penghasil CSS Clip-path
CSS Clip-path Generator menghasilkan nilai clip-path untuk bentuk-bentuk umum — segitiga, panah, pentagon, heksagon, bintang, chevron, lingkaran, elips, dan inset membulat — dengan pratinjau langsung.
Tentang alat ini
CSS Clip-path Generator menghasilkan nilai clip-path untuk bentuk-bentuk umum — segitiga, panah, pentagon, heksagon, bintang, chevron, lingkaran, elips, dan inset membulat — dengan pratinjau langsung.
Cara menggunakan
- Pilih bentuk dari daftar.
- Pilih warna isian untuk pratinjau.
- Klik Copy CSS dan terapkan clip-path pada elemen atau gambar apa pun.
Perlu diketahui
- clip-path menyembunyikan semua bagian di luar bentuk, jadi tidak perlu image mask atau file SVG.
- polygon() menerima daftar titik x y dalam persen, sehingga ikut menyesuaikan ukuran elemen.
- circle(50% at 50% 50%) memotong elemen menjadi lingkaran di tengah.
- inset() dengan round menambahkan sudut membulat pada potongan persegi panjang.
- Basic shape clip-path didukung di semua browser utama saat ini.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Bagaimana cara memotong gambar menjadi bentuk tertentu dengan CSS?
Terapkan clip-path pada gambar, misalnya clip-path: polygon(50% 0%, 0% 100%, 100% 100%); untuk segitiga.
Apa bedanya clip-path dan mask?
clip-path memotong bentuk vektor bertepi tegas. mask memakai gambar atau gradien dan bisa menghasilkan tepi lembut yang sebagian transparan.
Apakah clip-path bisa dianimasikan?
Bisa, jika kedua bentuk memakai fungsi yang sama dan jumlah titik yang sama, browser dapat membuat transisi di antara keduanya.
Apakah clip-path memengaruhi klik?
Ya. Area di luar bentuk yang dipotong tidak dirender dan tidak menerima pointer event.