Generator clip-path

Cara kerjanya

clip-path memotong elemen menjadi sebuah garis bentuk. Apa pun di luar bentuk tidak digambar dan tidak dapat diklik, yang menjadikannya bentuk sungguhan dan bukan gambar sebuah bentuk — dan ini berfungsi pada elemen apa pun, termasuk gambar dan video.

Persentase, bukan piksel

Titik poligon diberikan sebagai persentase dari lebar dan tinggi elemen itu sendiri, sehingga bentuk meregang bersama elemen alih-alih rusak pada ukuran yang berbeda. Itulah yang membuatnya dapat dipakai dalam tata letak responsif.

Klik mengikuti bentuk

Inilah bagian yang membedakan clip-path dari overlay dekoratif. Wilayah yang terpotong sama sekali tidak menerima pointer event, sehingga tombol segitiga berbentuk segitiga bagi mouse maupun bagi mata.

Menganimasikan antarbentuk

Poligon dapat bertransisi dengan mulus ke poligon lain hanya jika keduanya mencantumkan jumlah titik yang sama. Triknya yang biasa adalah melengkapi bentuk yang lebih sederhana dengan titik duplikat agar jumlahnya sama — segitiga yang ditulis sebagai empat titik dengan dua di antaranya di tempat yang sama dapat berubah menjadi persegi.

Baris -webkit-

Browser saat ini hanya memerlukan properti tanpa awalan. Salinan berawalan disertakan karena beberapa versi Safari yang lebih lama masih memerlukannya dan tidak ada ruginya membiarkannya.

Apa yang tidak dilakukannya

Ia memotong; ia tidak menata ulang alur. Teks di sekitarnya tetap memperlakukan elemen sebagai persegi panjang aslinya. Untuk membuat teks membungkus di sekitar bentuk, Anda memerlukan shape-outside, yang memakai sintaks yang sama.