Bagaimana untuk Membuat Bahagian Atas Melengkung untuk Latar Belakang Menggunakan CSS?

Membuat Lengkung di Atas Latar Belakang

Dalam reka bentuk yang disediakan, potongan bertujuan untuk muncul di atas latar belakang dan bukannya untuk betul. Begini cara anda boleh mengubah suai kod CSS untuk mencapai perkara ini:

<code class="css">/* Make the box taller to accommodate the curve */
.box {
  margin-top: 90px;
}

/* Create the top and bottom pseudo elements */
.box:before,
.box:after {
  bottom: 100%;
  width: 50%;
  left: 0;
  height: 80px; /* Adjust this to control the curve's height*/
  background:
    radial-gradient(50% 100% at bottom left, #fff 98%, #0000) top,
    radial-gradient(50% 100% at top right, #0000 98%, #fff) bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

/* Flip the after pseudo element */
.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}</code>

Dalam kod yang dikemas kini ini:

• Jing atas kotak dinaikkan untuk memastikan ia lebih tinggi daripada lengkung.
• Elemen pseudo kedua-duanya diletakkan di bahagian bawah kotak (bawah: 100%).
• Ketinggian elemen pseudo dilaraskan untuk mengawal ketinggian lengkung.
• Sifat transformasi digunakan untuk membalikkan sebelah kanan lengkung.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Bahagian Atas Melengkung untuk Latar Belakang Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!