Bagaimanakah saya boleh mengubah bahagian atas potongan menjadi latar belakang atas melengkung menggunakan CSS?

Menukar Potongan Atas kepada Latar Belakang Atas Melengkung

Dalam tugasan berasaskan kod ini, kami menyasarkan untuk mengubah potongan yang diletakkan di sebelah kanan blok menjadi bentuk melengkung duduk dengan anggun di atas blok.

Coretan kod semasa melibatkan .kotak yang mengandungi elemen .atas. Walaupun kesan yang diingini ialah mempunyai potongan di atas, kod meletakkannya di sebelah kanan. Jadi, mari kita selami versi yang disemak:

<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>

Pelarasan Utama:

• Kami telah menetapkan margin-top pada .box untuk sekurang-kurangnya sepadan ketinggian unsur pseudo, memastikan potongan tidak bertindih dengan blok.
• The unsur pseudo kini diletakkan di bahagian bawah .box menggunakan bahagian bawah: 100%.
• Ketinggian unsur pseudo ditetapkan kepada 80px, yang boleh anda laraskan untuk mengawal ketinggian lengkung.
• Kecerunan latar belakang telah diubah suai untuk mencipta jejari yang diingini kesan.

Voilà! Anda kini mempunyai potongan melengkung yang mengalir dengan lancar dari bahagian atas blok. Jangan ragu untuk mencuba lebih jauh dan mencipta lengkung yang melengkapkan reka bentuk anda dengan sempurna.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengubah bahagian atas potongan menjadi latar belakang atas melengkung menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!