Bagaimana untuk Mencipta Latar Belakang Lengkung Atas dengan Elemen Pseudo CSS?

Latar Belakang Melengkung Atas dengan Elemen Pseudo

Untuk meningkatkan imej latar belakang dengan potongan melengkung halus di atas, gunakan kuasa pseudo CSS elemen. Cabarannya melibatkan meletakkan potongan dengan betul, jadi ia bertindih dengan latar belakang di lokasi yang dikehendaki. Dengan mengubah suai kod asal, anda boleh mencapai kesan ini:

<code class="css">.box {
  margin-top: 90px;
  width: 200px;
  height: 100px;
  background: white;
  position: relative;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 50%;
  left: 0;
  height: 80px;
  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;
}

.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}

body {
  background: pink;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Latar Belakang Lengkung Atas dengan Elemen Pseudo CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!