Lengkung bahagian bawah div ke dalam menggunakan CSS

Question

Saya mahu 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;
  ketinggian: 400px;
  latar belakang: biru muda;
  jejari sempadan:0 0 200px 200px;
}

<div class="container">
  <div class="curved"></div>
</div>

Answer 1

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

<div class="container">
  <div class="curved"></div>
</div>

Answer 2

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

<div class="container">
</div>