◇

Generator CSS clip-path

Potong elemen menjadi bentuk umum dan salin CSS clip-path-nya.

File tetap di perangkat ini

File diproses di browser, tidak pernah diunggah. Situs mengunduh kode dan aset yang diperlukan alat. Tanpa akun atau pelacak.

Gunakan Unduh untuk menyimpan alat ini sebagai satu file HTML untuk penggunaan offline.

Privasi →

Bentuk

keluaran

Coba contoh lengkap

Contoh

Pilih bentuk segi enam untuk mendapatkan clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Setiap pasangan adalah posisi x dan y di dalam elemen, sehingga bentuknya ikut meregang mengikuti lebar dan tinggi elemen.

Perlu diingat

Clipping menyembunyikan sebagian elemen tetapi mempertahankan kotak tata letaknya: elemen di sekitarnya tidak bergeser dan sudut yang tersembunyi tidak lagi menerima klik. Border dan bayangan kotak juga ikut terpotong; untuk bayangan, pasang filter drop-shadow pada elemen pembungkus.

Tentang alat ini

Pilih bentuk dan langsung potong kotak pratinjau dengan aturan clip-path yang sesuai, lalu salin CSS yang siap pakai. Pratinjau diperbarui secara langsung, sepenuhnya di browser Anda.

Pertanyaan yang sering diajukan

Bagaimana cara kerja clip-path poligon?

Setiap titik adalah pasangan persentase x y relatif terhadap kotak; browser menghubungkannya secara berurutan dan hanya menampilkan area di dalam garis luarnya.

Apakah semua browser mendukung clip-path?

Bentuk polygon, circle, ellipse, dan inset didukung di setiap browser modern, jadi CSS yang dihasilkan bekerja tanpa prefix.