Bagaimanakah Saya Boleh Mencipta Sudut Terbalik Dengan Menggunakan CSS sahaja?

Menggunakan CSS untuk Mencipta Sudut Terbalik Terbalik

Dalam CSS, anda boleh mencipta pelbagai bentuk dan kesan melalui pelbagai teknik. Salah satu kesan tersebut ialah penciptaan sudut terbalik yang dicedok, di mana sudut-sudut sesuatu bentuk mempunyai rupa yang cekung (dicedok keluar).

Mencapai Sudut Cedok Terbalik

Untuk mencapai kesan ini semata-mata menggunakan CSS, kita boleh menggunakan gabungan sifat kotak-bayang dan limpahan. Proses ini melibatkan penciptaan elemen berikut:

1. Segi Lutsinar dengan Limpahan Tersembunyi: Ini mencipta bekas segi empat sama asas dengan sifat limpahan ditetapkan kepada tersembunyi untuk mengelakkan sebarang unsur tumpah di luar bekas.
2. Bulatan Lutsinar dengan Bayang Kotak: Bulatan lutsinar dibuat dengan sifat bayang-kotak, yang menambahkan kesan bayang-bayang pada bulatan.
3. Melaraskan Kedudukan Bulatan: Kedudukan bulatan dilaraskan menggunakan sifat atas atau bawah, membenarkan hanya bahagian tertentu bulatan (cth., suku) kelihatan. Ini mencipta ilusi sudut terbalik yang dicedok.

Kod Contoh

Untuk menggambarkan cara ini berfungsi, pertimbangkan kod CSS berikut:

#box {
  ...
  border-radius: 9999px 0 0 9999px;
}

#top,
#bottom {
  ...
}

#top::before,
#bottom::before {
  ...
  box-shadow: 10px 10px 5px 100px blue;
}

Penjelasan

Elemen #kotak berfungsi sebagai bekas utama dengan bucu bulat kecuali penjuru kanan atas dan bawah. Elemen #atas dan #bawah ialah bekas segi empat sama dengan limpahan tersembunyi, manakala unsur pseudo ::before bagi kedua-duanya ialah bulatan lutsinar dengan kesan bayangan kotak. Dengan melaraskan sifat atas dan bawah unsur-unsur pseudo ini, kita boleh mengawal bahagian bulatan yang boleh dilihat, mencipta sudut-sudut senduk yang diingini.

Dengan menggabungkan teknik ini, adalah mungkin untuk mencapai sudut senduk terbalik menggunakan tulen CSS, memberikan fleksibiliti dan kawalan ke atas bentuk dan rupa reka bentuk anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sudut Terbalik Dengan Menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!