Bagaimana untuk Meletakkan Lengkung Potongan di Bahagian Atas Latar Belakang Menggunakan CSS?

Cara Meletakkan Lengkung Potongan di Atas Latar Belakang

Matlamatnya adalah untuk mengubah suai kod CSS yang disediakan untuk meletakkan lengkung potong ( .atas) di bahagian atas latar belakang (.box), bukannya sebelah kanan.

Penjelasan Kod CSS:

Dalam kod asal, .top elemen diposisikan relatif kepada induknya .box menggunakan transform:translateY(-100%). Ini dengan berkesan meletakkannya di bawah latar belakang.

Untuk mengalihkan lengkung ke atas, kita perlu:

1. Laraskan jidar atas bekas .box untuk mencipta ruang di atasnya .
2. Letakkan semula elemen .atas menggunakan elemen pseudo untuk mencipta lengkung di bahagian atas.

Kod CSS yang disemak:

.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;
}

Cara ia Berfungsi:

• Bekas .box kini mempunyai jidar atas 90px, memberikan ruang di atasnya untuk lengkung potong.
• The .elemen atas dialih keluar dan dua elemen pseudo dicipta di bawah bekas .box.
• Unsur pseudo ini menggunakan kecerunan untuk mencipta bentuk lengkung.
• transform-origin:right dan transform :scaleX(-1) digunakan pada elemen pseudo kedua untuk membalikkan lengkung secara mendatar.

Dengan melaksanakan perubahan ini, lengkung potong kini akan diletakkan di atas latar belakang seperti yang dikehendaki.

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