Generator CSS Clip Path
Buat bentuk CSS clip-path: poligon dengan titik yang bisa diseret dan preset, lingkaran, elips, serta inset dengan sudut membulat. Pratinjau langsung dan salin kode.
Bentuk
Pengaturan bentuk
Seret pegangan di pratinjau atau ketik nilai yang tepat.
Pratinjau
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Alat Terkait
Lihat SemuaApa itu Generator Clip Path?
Menggambar bentuk clip-path secara visual. Poligon dapat diedit dengan menyeret titik di pratinjau atau mengetik persentase yang tepat, dengan preset mulai dari segitiga hingga bintang dan balon obrolan; bentuk lingkaran, elips, dan inset diatur dengan slider.
Cara menggunakan Generator Clip Path
- Pilih Bentuk: Poligon, Lingkaran, Elips, atau Ke dalam (inset).
- Untuk poligon, pilih preset lalu seret pegangannya atau ketik persentase X/Y setiap titik; gunakan Tambah titik / Hapus titik.
- Untuk lingkaran dan elips, atur radius dan pusatnya; untuk inset, atur Atas, Kanan, Bawah, Kiri, dan Radius sudut opsional.
- Aktifkan Tampilkan area yang terpotong untuk melihat bagian yang dibuang.
- Salin kode CSS-nya.
Contoh
Hexagon preset with point 1 moved to X 20%
clip-path: polygon(20% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Kapan menggunakan Generator Clip Path
Gunakan clip-path untuk bentuk gambar dekoratif, tepi section yang miring, avatar segi enam, dan animasi reveal (clip-path dapat dianimasikan antarbentuk dengan jumlah titik yang sama). Konten di luar bentuk disembunyikan dan tidak menerima klik. Untuk persegi panjang membulat, utamakan border-radius; untuk bentuk yang harus dialiri teks di sekitarnya, gunakan shape-outside.
Cara kerja Generator Clip Path
Koordinat adalah persentase dari border box elemen, diukur dari sudut kiri atas. Poligon ditulis sebagai polygon(x% y%, …) sesuai urutan titik, lingkaran sebagai circle(r% at x% y%), elips sebagai ellipse(rx% ry% at x% y%), dan inset sebagai inset(top right bottom left round r) dengan keempat offset diringkas seperti shorthand margin. Tambah titik menyisipkan titik baru di tengah antara titik terpilih dan titik berikutnya.
Kasus Penggunaan Umum
- Avatar berbentuk segi enam atau bintang
- Tepi bagian hero yang miring
- Indikator langkah berbentuk panah dan chevron
- Kartu berbentuk balon obrolan
- Animasi hover yang mengubah bentuk
Pertanyaan Umum
Apakah saya butuh -webkit-clip-path?
Tidak untuk bentuk dasar di browser saat ini; Safari sudah mendukung properti tanpa prefiks sejak versi 13.1.
Bisakah clip-path dianimasikan?
Bisa, dengan transition atau keyframes, asalkan kedua bentuk berjenis sama dan poligonnya memiliki jumlah titik yang sama.
Mengapa bagian elemen yang tersembunyi tidak bisa diklik?
clip-path juga memotong area deteksi klik: area di luar bentuk tidak bisa diklik.