如何将带有CSS的SVG clipPath应用于div的一个边缘？

我有一个布局，有许多不同的曲线应用于全宽框的顶部和/或底部。我几乎做到了，使用带有

clipPathUnits=“objectBoundingBox”

的SVG

clipPath

元素，使用CSS

剪辑路径：url（#曲线）

应用于框。但是，当前曲线按比例缩放，我希望它在宽度随长方体缩放时保持其高度

这是我目前的代码：

.box{
高度：100vw；
背景色：红色；
剪辑路径：url（#曲线）；
}

---

将其用作遮罩，并将其宽度定义为

100%

和

auto

高度

.box{
高度：200px；/*这可以是任何高度，并且不会影响曲率*/
-网络工具包掩码：
url（'data:image/svg+xml；utf8'）
顶部/100%自动无重复；
背景：红色；
}

---

太好了，非常感谢-出于某种原因，CSS面具从我身边经过。它们似乎更适合这个用例。注意：使用这种方法几乎可以达到目的，但是当盒子又高又窄时，面具形状的底部会切断盒子底部的内容。我解决这个问题的方法是将一个

：before

伪元素放入框中，并对其应用一个遮罩（形状只是具有最小高度的曲线）。保持伪元素与一些填充顶部的比例，并且它工作得很好。@ StvayTayLor你也可以考虑额外的蒙版层来覆盖下面的部分：（你只需要找到最好的值[<代码> 10vw < /代码>我已经在例子中使用了）以确保与顶部没有间隙。