Penjana clip-path
Pilih bentuk, laraskannya, salin CSS. Tanpa imej.
- Berjalan dalam pelayar anda — teks anda tidak pernah dihantar ke mana-mana
- Tanpa pendaftaran, tanpa kuota, percuma digunakan sebanyak mana yang anda suka
Cara ia berfungsi
clip-path memotong elemen kepada bentuk garis luar. Apa-apa di luar bentuk tidak dilukis dan tidak boleh diklik, menjadikannya bentuk sebenar dan bukannya gambar bentuk — dan ia berfungsi pada sebarang elemen, termasuk imej dan video.
Peratusan, bukan piksel
Titik poligon diberikan sebagai peratusan lebar dan tinggi elemen itu sendiri, jadi bentuk meregang bersama elemen dan bukannya rosak pada saiz berbeza. Itulah yang menjadikannya boleh digunakan dalam susun atur responsif.
Klik mengikut bentuk
Inilah bahagian yang membezakan clip-path daripada tindanan hiasan. Kawasan yang dipangkas tidak menerima peristiwa penuding langsung, jadi butang segi tiga berbentuk segi tiga kepada tetikus dan juga mata.
Menganimasikan antara bentuk
Poligon boleh beralih dengan lancar kepada poligon lain hanya jika kedua-duanya menyenaraikan bilangan titik yang sama. Helah biasa ialah menambah titik pendua pada bentuk yang lebih mudah supaya bilangannya sepadan — segi tiga yang ditulis sebagai empat titik dengan dua di tempat yang sama boleh bertukar menjadi segi empat sama.
Baris -webkit-
Pelayar semasa hanya memerlukan sifat tanpa awalan. Salinan beravalan disertakan kerana sesetengah versi Safari lama masih memerlukannya dan tiada kos untuk membiarkannya.
Apa yang tidak dilakukannya
Ia memangkas; ia tidak mengalir semula. Teks di sekeliling masih menganggap elemen sebagai segi empat tepat asalnya. Untuk membuat teks membalut sekeliling bentuk anda mahukan shape-outside, yang menggunakan sintaks yang sama.
Penjana clip-path — soalan lazim
Adakah kawasan yang dipangkas kekal boleh diklik?
Tidak. Apa-apa di luar bentuk tidak menerima peristiwa penuding, yang biasanya betul-betul apa yang anda mahu.
Bolehkah saya menganimasikan clip-path?
Antara poligon dengan bilangan titik yang sama, ya. Tambah titik pendua pada bentuk yang lebih mudah untuk memadankan.
Adakah teks membalut sekeliling bentuk?
Tidak. clip-path hanya memangkas. Gunakan shape-outside untuk pembalutan.
Adakah awalan -webkit- diperlukan?
Hanya untuk Safari lama. Setiap pelayar semasa menyokong sifat biasa.
Bolehkah saya menggunakannya pada imej atau video?
Ya, pada sebarang elemen.