Generator Clip-Path CSS

Cara menggunakan generator clip-path

1. Pilih Bentuk: Poligon, Lingkaran, Elips, atau Inset. Lapisan yang pudar menampilkan seluruh elemen, sedangkan lapisan yang terang menampilkan bagian yang tetap terlihat setelah dipotong.
2. Seret titik-titik di editor. Pada poligon, setiap titik adalah sudut; klik di mana saja dalam area untuk menambah titik di tepi terdekat. Pada lingkaran atau elips, seret titik pusat dan titik radius. Pada inset, seret empat titik di tepinya.
3. Sempurnakan di kolom-kolom di bawahnya: daftar Titik (X dan Y dalam persen, dengan Buang dan Tambah titik) untuk poligon, atau kolom Radius, Pusat X, Pusat Y, Atas, Kanan, Bawah, Kiri, dan Sudut membulat (px) untuk bentuk lainnya.
4. Mulai lebih cepat dengan Preset: segitiga, trapesium, jajar genjang, belah ketupat, segi lima, segi enam, segi delapan, sudut terpotong, bintang, silang, panah, chevron, balon percakapan, lingkaran, elips, dan inset.
5. Centang Paskan ke kelipatan 5% untuk nilai yang rapi, dan Tambahkan -webkit-clip-path (Safari lama) jika Anda masih mendukung Safari 13.0 atau versi sebelumnya.
6. Jika mau, letakkan foto di Gambar latar (opsional) untuk melihat bentuknya pada gambar Anda sendiri. File tersebut tidak pernah diunggah.
7. Salin Kode CSS dengan tombol Salin.

Keyboard: fokuskan sebuah titik, geser dengan tombol panah (1%, atau 10% dengan Shift), dan tekan Delete untuk menghapus titik poligon. Poligon selalu memiliki minimal tiga titik.

Fungsi bentuk clip-path

clip-path menyembunyikan semua yang berada di luar sebuah bentuk. Elemen tetap memiliki ukuran yang sama dalam tata letak; hanya tampilan dan area yang bisa diklik yang dipotong.

• polygon(x1 y1, x2 y2, …) menghubungkan titik-titik secara berurutan lalu menutup bentuknya. polygon(50% 0%, 100% 100%, 0% 100%) adalah segitiga yang menghadap ke atas. Koordinat dimulai dari sudut kiri atas elemen.
• circle(r at cx cy): circle(50% at 50% 50%) adalah lingkaran terbesar yang berpusat di tengah elemen. Radius dalam persen relatif terhadap diagonal elemen dibagi √2, sehingga nilainya sama dengan bagian dari lebar hanya untuk elemen persegi.
• ellipse(rx ry at cx cy): radius horizontal adalah bagian dari lebar, radius vertikal bagian dari tinggi.
• inset(top right bottom left round radius) memotong persegi panjang di dalam tepi elemen, dengan singkatan satu sampai empat nilai seperti margin dan sudut membulat yang opsional.

Alat ini menulis nilai dalam persen, sehingga bentuknya menyesuaikan ukuran elemen, berapa pun ukurannya.

Tips membuat bentuk yang bagus

• Urutan titik poligon itu penting: mengelilingi tepi searah jarum jam (atau berlawanan arah jarum jam) mencegah bentuk yang bersilangan seperti “dasi kupu-kupu”.
• Dua bentuk dengan jumlah titik yang sama bisa dianimasikan: transition: clip-path 0.4s mengubah segi enam menjadi segi enam lain dengan mulus. Browser tidak bisa melakukan interpolasi antara poligon dengan jumlah titik yang berbeda.
• clip-path juga memotong box-shadow dan border. Untuk memberi bayangan pada bentuk yang dipotong, pasang filter: drop-shadow() pada elemen induknya.
• Area yang terpotong tidak menerima klik maupun hover, sangat berguna untuk tombol berbentuk tidak beraturan.