Bagaimanakah Saya Boleh Membuat Sempadan Sudut Sahaja dalam CSS Menggunakan Imej Topeng?

Mencapai Sempadan Sudut Sahaja dengan CSS

Apabila mencipta reka bentuk yang menarik secara visual, menambah sempadan boleh menjadi penting. Walau bagaimanapun, bagaimana jika anda mahukan sempadan hanya di sudut sesuatu elemen? Ini boleh dicapai melalui penggunaan CSS yang inovatif.

Cabaran

Untuk mencipta sempadan sudut sahaja, anda boleh menggunakan berbilang sempadan dan meletakkannya dengan tepat. Walau bagaimanapun, pendekatan ini boleh membosankan dan rumit untuk dilaksanakan.

Penyelesaian

Penyelesaian yang lebih elegan melibatkan penggunaan imej topeng. Begini caranya:

1. Buat Sempadan Pepejal: Mula-mula, tentukan sempadan pepejal menggunakan sifat sempadan.
2. Gunakan Imej Topeng: Seterusnya, gunakan sifat -webkit-mask untuk menggunakan topeng kecerunan kon. Topeng ini menyembunyikan sempadan di mana-mana kecuali untuk sudut yang ditentukan.
3. Tambah Padding: Untuk mencipta jurang antara sempadan dan kandungan, tambah padding menggunakan sifat padding.
4. Tetapkan Saiz Sudut: Sesuaikan saiz sudut dengan melaraskan pembolehubah --s dalam topeng definisi.

Kod Contoh

Berikut ialah coretan kod contoh untuk menunjukkan teknik:

img {
  --s: 50px; /* the size on the corner */
  padding: 20px; /* the gap between the border and image */
  border: 5px solid #B38184; /* the thickness and color */
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

Dengan menggunakan teknik CSS ini, anda boleh mencapai sempadan sudut sahaja yang bersih dan menarik secara visual dengan mudah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Sempadan Sudut Sahaja dalam CSS Menggunakan Imej Topeng?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!