Rumah > Soal Jawab > teks badan
Saya ingin membengkokkan tepi bawah div/latar belakang segi empat tepat ini menggunakan CSS, jadi hasilnya seperti ini:
Adakah sesiapa tahu bagaimana untuk melaksanakannya?
.curved { margin: 0 auto; height: 400px; background: lightblue; border-radius:0 0 200px 200px; }
<div class="container"> <div class="curved"></div> </div>
P粉2116001742023-10-24 15:57:52
Lihatlah. Saya mencipta ini menggunakan :after pseudo-element. Ia membantu jika latar belakang adalah warna pepejal.
.curved { margin: 0 auto; width: 300px; height: 300px; background: lightblue; position: relative; } .curved:after{ background: white; position: absolute; content: ""; left:0; right:0; bottom: -25px; height: 50px; border-radius: 50% 50% 0 0; }
P粉9808152592023-10-24 00:00:31
Hanya gunakan border-radius
dan bergantung pada limpahan. Anda juga boleh mempertimbangkan elemen pseudo untuk mengelakkan markup tambahan:
.container { margin: 0 auto; width: 500px; height: 200px; background: lightblue; position: relative; overflow: hidden; } .container:after { content: ""; position: absolute; height: 80px; left: -10%; right: -10%; border-radius: 50%; bottom: -25px; background: #fff; }