Css 如何在背景顶部创建曲线？

请帮我从.top更改剪切，使其位于顶部而不是右侧。 如图所示。 事先非常感谢。 我真的希望得到你的帮助，我对这个行业还不熟悉。 源代码：

.box{
边缘顶部：120px；
宽度：200px；
高度：100px；
背景：白色；
}
.盒子，上面{
高度：100px；
宽度：150px；
转换：translateY（-100%）；
位置：相对位置；
背景：#fff；
}
.托普：以前，
.托普：之后{
内容：“；
位置：绝对位置；
排名：0；
宽度：50px；
左：100%；
底部：50%；
背景：
径向梯度（左上角100%50%，右上角#fff 98%，透明100%），
径向梯度（右下100%50%，透明98%，#fff 100%）左侧；
背景大小：50%100%；
背景重复：无重复；
}
.托普：之后{
变换原点：底部；
变换：scaleY（-1）；
}
身体{
背景：粉红色；
}

---

您可以按如下方式调整代码：

.box{
边距顶部：90px；/*使其与伪元素的高度保持一致*/
宽度：200px；
高度：100px；
背景：白色；
位置：相对位置；
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
底部：100%；
宽度：50%；
左：0；
高度：80px；/*调整此值以控制高度*/
背景：
径向梯度（左下50%100%，fff 98%，透明100%）顶部，
径向梯度（右上角50%100%，透明98%，#fff 100%）底部；
背景大小：100%50%；
背景重复：无重复；
}
.盒子：之后{
变换原点：右；
转换：scaleX（-1）；
}
身体{
背景：粉红色；
}