Rumah  >  Soal Jawab  >  teks badan

Lengkung tepi bawah div ke dalam menggunakan CSS

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粉384366923P粉384366923383 hari yang lalu856

membalas semua(2)saya akan balas

  • P粉211600174

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

    balas
    0
  • P粉980815259

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

    balas
    0
  • Batalbalas