Gunakan atribut klip-laluan CSS untuk menanam unsur-unsur ke dalam bentuk tersuai seperti segitiga, takik bulat, poligon, dan lain-lain tanpa bergantung pada imej atau SVG. Kelebihannya termasuk: 1. Menyokong pelbagai bentuk asas seperti Circle, Ellipse, Polygon, dan lain -lain; 2. Pelarasan responsif dan boleh disesuaikan dengan terminal mudah alih; 3. Mudah untuk animasi, dan boleh digabungkan dengan hover atau javascript untuk mencapai kesan dinamik; 4. Ia tidak menjejaskan aliran susun atur, dan hanya tanaman kawasan paparan. Penggunaan umum adalah seperti laluan klip bulat: bulatan (50px di tengah) dan segi tiga klip-laluan: poligon (50% 0%, 100% 100%, 0% 100%). Nota termasuk: keserasian yang baik tetapi tidak menyokong IE lama; Bentuk kompleks boleh menjejaskan prestasi; Laluan klip berkuat kuasa selepas berubah dan tidak akan berubah dengan putaran dan skala. Dengan mengubahsuai nilai klip-laluan secara dinamik, kesan interaktif seperti pengembangan butang dan ubah bentuk kad juga boleh dicapai.

Untuk meletakkannya secara langsung, titik utama: menggunakan atribut clip-path CSS, anda boleh dengan mudah menanam pelbagai bentuk tersuai untuk unsur-unsur, seperti segitiga, poligon, takik bulat, dan lain-lain, tanpa bergantung pada gambar atau SVGs.

Mengapa memilih laluan klip?

Dalam reka bentuk web, kadang-kadang kita perlu membuat imej atau latar belakang muncul bentuk bukan kubah. Kaedah umum yang digunakan pada masa lalu adalah menggunakan imej PNG atau topeng SVG, tetapi kaedah ini tidak cukup fleksibel dan tidak mudah dikekalkan. Dan clip-path menyediakan penyelesaian CSS tulen, yang:

• Menyokong pelbagai bentuk asas (bulatan, elips, poligon, dan lain -lain)
• Boleh diselaraskan secara responsif
• Mudah untuk diwujudkan (walaupun tidak semua pelayar menyokong peralihan)
• Ia tidak menjejaskan aliran susun atur, ia hanya bahagian paparan "dipotong"

Bagaimana cara menulis bentuk biasa?

Bulatan dan elips

 Clip-Path: Circle (50px di tengah);
Clip-Path: Ellipse (50px 30px pada 20% 30%);

Jenis ini sesuai untuk membuat avatar, ikon kecil, dan tempat lain di mana tanaman pekeliling diperlukan. Parameter adalah radius dan kedudukan pusat masing -masing.

poligon poligon ()

Ini adalah jenis yang paling fleksibel dan biasa digunakan, dan boleh mewujudkan pelbagai bentuk kompleks seperti segitiga, trapezoid, dan bintang.

 Clip-Path: Polygon (50% 0%, 100% 100%, 0% 100%);

Contoh di atas akan memotong segi empat tepat ke dalam segitiga. Koordinat dalam kurungan mewakili kedudukan setiap puncak, dan disambungkan untuk membentuk graf.

Petua: Jika anda tidak pasti bagaimana menulis koordinat, anda boleh menggunakan beberapa alat dalam talian untuk membantu dalam generasi, seperti clippy .

Beberapa nota dalam aplikasi praktikal

• Keserasian : Pelayar arus perdana pada dasarnya menyokongnya, tetapi ia tidak serasi dengan versi lama IE. Jika projek perlu menyokong IE, disyorkan untuk menyediakan penyelesaian alternatif.
• Pemprosesan Responsif : Menggunakan unit peratusan membolehkan kawasan tanaman berubah dengan bekas, sesuai untuk terminal mudah alih.
• Kesan prestasi : Poligon kompleks boleh menjejaskan prestasi rendering, terutamanya apabila menguji dengan animasi.
• Hubungan dengan Transform : clip-path berkuat kuasa selepas transformasi elemen, jadi jika anda menggunakan putaran, skala dan kesan lain, kawasan tanaman tidak akan berubah juga.

Bagaimana untuk membuat kesan interaksi yang menarik?

Anda boleh menggabungkan hover atau JavaScript untuk menukar clip-path secara dinamik untuk mencapai kesan animasi seperti pengembangan dan ubah bentuk.

Sebagai contoh, kesan secara beransur -ansur memaparkan semua kandungan selepas melayang butang:

 .button {
  Clip-Path: Polygon (0 0, 100% 0, 100% 30%, 0 30%);
  Peralihan: CLIP-PATH 0.3S EASE;
}

.button: hover {
  Clip-Path: Polygon (0 0, 100% 0, 100% 100%, 0 100%);
}

Ini akan membolehkan kesan visual perlahan "berkembang" dari jalur kecil, yang sesuai untuk adegan seperti kad, menu navigasi, dll.

Pada dasarnya itu sahaja. Menguasai penulisan beberapa bentuk biasa dan menambah sedikit imaginasi, dan anda boleh menggunakan clip-path untuk membuat banyak kesan halaman yang menarik.

Atas ialah kandungan terperinci Membuat bentuk tersuai dengan laluan klip CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!