Trik untuk memotong sudut menggunakan topeng CSS dan sifat klip-laluan

Artikel ini meneroka teknik pemotongan sudut kreatif menggunakan mask CSS dan ciri-ciri clip-path . Kami akan membina kerja sebelumnya dengan topeng CSS untuk membuat bentuk sudut yang pelbagai menggunakan kod yang boleh diguna semula dan pembolehubah laras. Penjana CSS dalam talian dirujuk untuk menggambarkan hasilnya.

Dua jenis pemotongan utama diperiksa: bulat dan bersudut. Setiap membolehkan bentuk penuh atau output sempadan sahaja, dan pemilihan sudut.

Harta CSS mask sangat digunakan. Jika tidak dikenali, buku asas yang cepat disyorkan sebelum meneruskan.

Pemotongan pekeliling

Potongan bulat menggunakan radial-gradient() . Empat kecerunan, satu per sudut, pada mulanya digunakan. Setiap kecerunan meliputi seperempat dimensi elemen. Kecerunan sampel:

 <code>radial-gradient(circle 30px at top left, #0000 98%, red) top left;</code>

Ini mewujudkan bulatan radius 30px di kiri atas, telus (#0000) di tengah, dan merah di tempat lain. Pelarasan kecil (contohnya, 98% bukannya 100%) menghalang tepi bergerigi.

Kod yang dioptimumkan menggunakan sifat tersuai:

 <code>--g: #0000 98%,#000; --r: 30px; mask: radial-gradient(var(--r) at 0 0 ,var(--g)) 0 0, radial-gradient(var(--r) at 100% 0 ,var(--g)) 100% 0, radial-gradient(var(--r) at 0 100%,var(--g)) 0 100%, radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%; mask-size: 51% 51%; mask-repeat: no-repeat;</code>

Penjana menggunakan sintaks yang sedikit berbeza, lebih ringkas.

Kurang kecerunan?

Ya! Satu kecerunan boleh mencukupi. Caranya melibatkan satu radial-gradient() dengan kedudukannya diselaraskan untuk mencipta ilusi empat sudut potong. Kaedah ini memerlukan mengetahui dimensi elemen. Penyelesaian menggunakan peratusan dan saiz kecerunan yang sedikit lebih kecil (99.5%) dibentangkan, tetapi mempunyai batasan dengan dimensi perpuluhan. Kaedah tunggal tunggal yang unggul menggunakan offset negatif untuk mencapai kesan yang sama tanpa masalah pembulatan.

Pelepasan sudut dicapai dengan mengeluarkan kecerunan yang berkaitan dan menyesuaikan saiz kecerunan yang tinggal.

Cut-Only Cut-Outs Circular

Mewujudkan bentuk sempadan sahaja memerlukan elemen pseudo untuk mengelakkan mengaburkan kandungan. Konfigurasi yang berbeza (satu, dua, tiga, atau empat sudut potong) memerlukan pelbagai kombinasi radial-gradient() dan conic-gradient() untuk mencapai kesan sempadan yang dikehendaki. Artikel ini memperincikan kombinasi ini, yang menonjolkan penggunaan repeat-y untuk mengurangkan bilangan kecerunan yang diperlukan dalam beberapa kes.

Pemotongan bersudut

Pemotongan bersudut menggunakan conic-gradient() , satu per sudut. Setiap kecerunan from dan at kedudukan diselaraskan untuk membuat potongan bersudut. Melumpuhkan sudut mengikuti prinsip yang sama seperti pemotongan bulat. clip-path menawarkan alternatif, menentukan setiap sudut dengan tiga mata. Formula untuk mengira mata ini disediakan. Kes sudut 90 darjah membolehkan pengoptimuman, menggunakan kecerunan tunggal.

Sempadan sahaja yang dipotong bersudut

Kaedah clip-path lebih disukai daripada kecerunan untuk pemotongan bersudut sempadan sahaja kerana kerumitan dan potensi isu anti-aliasing dengan kecerunan. Artikel ini menggariskan pendekatan clip-path , memperincikan pengiraan titik dalaman dan luaran. Kes 180 darjah membolehkan pengoptimuman kod.

Kesimpulan

Artikel ini menunjukkan kuasa dan fleksibiliti mask CSS dan clip-path untuk mewujudkan bentuk kompleks. Walaupun penjelasan terperinci disediakan, penjana dalam talian yang disertakan memudahkan penjanaan kod, menjadikan teknik -teknik ini dapat diakses untuk pelbagai keperluan reka bentuk.

Atas ialah kandungan terperinci Trik untuk memotong sudut menggunakan topeng CSS dan sifat klip-laluan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!