Bagaimana cara menggunakan Clip-Path: Path (...) untuk menjadikan lebar dan ketinggian butang penyesuaian grafik yang dipotong?

Petua untuk membuat clip-path: path(...) untuk menanam saiz adaptif grafik

Apabila menanam graf dengan clip-path: path(...) , ini adalah masalah yang biasa untuk menjadikannya secara automatik saiznya berdasarkan saiz butang. Artikel ini akan memberikan penyelesaian.

Kuncinya ialah menggunakan unit relatif (peratusan). Dengan cara ini, tidak kira bagaimana saiz butang berubah, laluan kliping akan diselaraskan dengan sewajarnya.

Pertama, fahami sistem koordinat fungsi path . Dengan mengandaikan lebar butang adalah width dan ketinggian adalah height , titik laluan ditakrifkan menggunakan peratusan. Sebagai contoh, tanaman bulatan:

 Clip-Path: Path ('M 50% 0 A 50% 50% 0 0 1 100% 50% A 50% 50% 0 0 1 50% 100% A 50% 50% 0 0 1 0 50% A 50% 50% 0 0 1 50% 0 Z');

M 50% 0 bermaksud bermula dari bahagian atas pusat butang; A 50% 50% 0 0 1 100% 50% Lukiskan arka dengan radius separuh lebar dan ketinggian butang, dan sebagainya.

Dengan peratusan, laluannya berskala secara proporsional tanpa mengira perubahan saiz butang, untuk kesan penyesuaian.

Untuk menanam bentuk lain, hanya menyesuaikan koordinat laluan mengikut bentuk dan penggunaan peratusan untuk memastikan ia sesuai dengan saiz yang berbeza.

Atas ialah kandungan terperinci Bagaimana cara menggunakan Clip-Path: Path (...) untuk menjadikan lebar dan ketinggian butang penyesuaian grafik yang dipotong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!