Generator clip-path CSS

Potong gambar atau blok menjadi poligon, lingkaran, atau persegi panjang membulat dengan clip-path. Seret titik dengan mouse dan salin kode CSS.

Gratis
Tanpa daftar
Tanpa unggah file
Windows, Mac, Android, iPhone

Memuat alat…

Tentang alat ini

Gambar bentuk potongan untuk gambar dan blok Anda: 15 bentuk siap pakai (segitiga, segi enam, bintang, panah, balon percakapan…), titik yang bisa diseret dengan mouse atau digeser dengan keyboard, ditambah mode lingkaran dan persegi panjang membulat. Coba bentuk di foto Anda dan salin kode CSS.

Kapan menggunakannya

Foto profil dan thumbnail yang unik

Segi enam, belah ketupat, atau bintang memberi identitas visual pada halaman tim atau galeri tanpa mengedit setiap gambar.

Bagian yang miring

Poligon empat titik yang miring di bagian bawah banner menciptakan transisi dinamis antara dua bagian.

Lencana dan label

Panah, chevron, dan balon dibuat dengan CSS murni, tanpa gambar atau SVG.

Cara menggunakan

Pilih bentuk siap pakai atau mode (poligon, lingkaran, persegi panjang).
Seret titik di pratinjau, tambah atau hapus titik.
Salin kode clip-path.

Cara kerjanya

Setiap titik disimpan sebagai persentase lebar dan tinggi elemen, dengan satu desimal. Editor menggambar titik di atas pratinjau; menggesernya memperbarui nilai polygon() secara langsung.

Poligon beraturan dan bintang dihitung dengan trigonometri (titik tersebar di lingkaran). Kode yang dihasilkan mencakup versi -webkit- untuk browser Safari lama.

Tips untuk hasil terbaik

Jaga urutan titik mengikuti garis luar, jika tidak bentuknya akan bersilangan.
Untuk animasi antara dua bentuk, gunakan jumlah titik yang sama pada keduanya.
box-shadow ikut terpotong: gunakan filter: drop-shadow() pada elemen induk.
Coba bentuk di foto asli Anda: wajah bisa terpotong oleh sudut.

Masalah umum dan solusinya

Bayangan elemen hilang

clip-path juga memotong bayangan. Bungkus elemen dengan induk dan terapkan filter: drop-shadow() pada induknya.

Bentuknya bersilangan

Titik tidak berurutan mengikuti garis luar. Hapus titik yang salah dan tambahkan lagi di tempat yang benar.

Klik tidak mengenai elemen

Area yang terpotong tidak lagi merespons klik: memang begitu, hanya bagian yang terlihat yang bisa diklik.

Pertanyaan umum

Apa gunanya clip-path?

Properti ini memotong elemen mengikuti bentuk: semua di luarnya menjadi tak terlihat. Bisa membuat gambar heksagonal, banner miring, atau lencana tanpa mengedit gambar.

Bentuk apa saja yang bisa dibuat?

polygon() untuk bentuk bersisi lurus apa pun, circle() dan ellipse() untuk bentuk bulat, inset() untuk persegi panjang dengan margin dan sudut membulat.

Apakah bentuk menyesuaikan ukuran elemen?

Ya: titik dinyatakan dalam persen, sehingga bentuk mengikuti ukuran gambar atau blok.

Bisakah clip-path dianimasikan?

Ya, di antara dua poligon dengan jumlah titik yang sama: CSS menginterpolasi posisi setiap titik.

Pencarian terkait

Masih bermasalah?

Tanyakan di forum: kategori, alat, data perangkat, dan hasil tes akan diisi otomatis.