Html 使用CSS将div的底侧弯曲到内侧

我想用CSS弯曲这个矩形div/background的底面，结果如下：

有没有人知道如何实现这一目标

.curve{
保证金：0自动；
高度：400px；
背景：浅蓝色；
边界半径：0 0 200px 200px；
}

---

只需使用

边界半径

并依靠一些溢出。还可以考虑伪元素以避免额外的标记：

.container{
保证金：0自动；
宽度：500px；
高度：200px；
背景：浅蓝色；
位置：相对位置；
溢出：隐藏；
}
.货柜：之后{
内容：“；
位置：绝对位置；
高度：80px；
左-10%；
右图：-10%；
边界半径：50%；
底部：-25px；
背景：#fff；
}

---

检查此项。我用：after伪元素创建了这个。如果背景为纯色，则可能会有所帮助

.curve{
保证金：0自动；
宽度：300px；
高度：300px；
背景：浅蓝色；
位置：相对位置；
}
.之后{
背景：白色；
位置：绝对位置；
内容：“；
左：0；
右：0；
底部：-25px；
高度：50px；
边界半径：50%50%0；
}

---

您认为其中最兼容浏览器的方式是什么？