Html 如何从顶部和底部变形图元

在

css

中是否有任何方法可以使元素从上到下变形，如下图所示？我不想用背景图像来做这个

.box{
背景#363742；
位置：相对位置；
溢出：隐藏；
高度：200px；
}
.box:之前，
.盒子：之后{
边界半径：1000px/50px；
位置：绝对位置；
背景：#fff；
高度：80px；
内容：''；
右：-50px；
左：-50px；
顶部：-50px；
}
.盒子：之后{
底部：-50px；
顶部：自动；
}

---

你想要凹形？非常好-比我的答案好！