Rumah > Artikel > hujung hadapan web > 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:
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:
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!