Bagaimanakah Saya Boleh Mencipta Sudut Terbalik dalam CSS Menggunakan CSS Hanya?

Mencipta Sudut Terbalik Menggunakan CSS Tulen

Dalam CSS, mencipta sudut bulat adalah mudah menggunakan sifat jejari sempadan. Walau bagaimanapun, untuk mencapai bucu scooped terbalik, di mana bucu melengkung ke dalam, memerlukan teknik yang lebih maju.

Untuk mencipta sudut scooped terbalik, kami akan menggunakan pendekatan berikut:

• Buat segi empat sama lutsinar dengan limpahan tersembunyi.
• Letakkan bulatan lutsinar dengan bayangan kotak di dalam segi empat sama.
• Laraskan kedudukan bulatan untuk mendedahkan hanya satu perempat daripadanya.

Pelaksanaan Kod

#box {
  position: relative;
  width: 200px;
  height: 50px;
  background-color: blue;
  border-radius: 9999px 0 0 9999px;
  margin: 30px;
  text-align: center;
  color: #fff;
  padding-top: 10px;
}

#top,
#bottom {
  position: absolute;
  height: 30px;
  width: 30px;
  right: 0;
  overflow: hidden;
}

#top {
  top: -30px;
}

#bottom {
  bottom: -30px;
}

#top::before,
#bottom::before {
  content: '';
  position: absolute;
  right: 0;
  height: 200%;
  width: 200%;
  border-radius: 100%;
  box-shadow: 10px 10px 5px 100px blue;
  z-index: -1;
}

#top::before {
  top: -100%;
}

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