用CSS曲线底部的div到内部

Question

用CSS曲线底部的div到内部

我想用CSS修改这个矩形div / background的底部，所以结果是这样的

是否有人有想法如何实现？

.curved {
  margin: 0 auto;
  width: 800px;
  height: 500px;
  background: lightblue;}

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

Answer 1

检查一下。我创建了这个：在伪元素之后。如果背景是纯色可能会有所帮助。.curved&nbsp;{ &nbsp;&nbsp;margin:&nbsp;0&nbsp;auto; &nbsp;&nbsp;width:&nbsp;300px; &nbsp;&nbsp;height:&nbsp;300px; &nbsp;&nbsp;background:&nbsp;lightblue; &nbsp;&nbsp;position:&nbsp;relative;}.curved:after{ &nbsp;&nbsp;background:&nbsp;white; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;left:0; &nbsp;&nbsp;right:0; &nbsp;&nbsp;bottom:&nbsp;-25px; &nbsp;&nbsp;height:&nbsp;50px; &nbsp;&nbsp;border-radius:&nbsp;50%&nbsp;50%&nbsp;0&nbsp;0;}<div&nbsp;class="container"> &nbsp;&nbsp;<div&nbsp;class="curved"></div></div>