如何绘制CSS伪元素背景曲线？

我有一个红色的伪元素，我正在添加到我网站上一些部分的背景中

一切都很好，但我想把它从直线改成曲线

你知道怎么做吗

。顶部：之前{
不透明度：.7；
内容：''；
位置：绝对位置；
宽度：100%；
高度：600px；
边缘顶部：12雷姆；
变换：歪斜（20度）；
背景：线性梯度（-20度，#fff 0，#fff 67%，红色100%）；
z指数：-1；
}

---

一种方法是使用自定义svg创建

剪辑路径

，而不是转换伪元素：

正文{
保证金：0
}
.顶部：之前{
不透明度：.7；
内容：''；
位置：绝对位置；
宽度：100%；
高度：600px；
边缘顶部：12雷姆；
剪辑路径：url（#svgPath）；
背景：线性梯度（-20度，#fff 0，#fff 67%，红色100%）；
z指数：-1；
}