Css 使用：：after伪元素重复SVG模式作为边框的剪辑路径

我正在尝试在站点标题的底部创建一个不对称的锯齿图案，看起来像这样（除了锯齿是不对称的）：

我尝试过一些使用（线性梯度）的纯CSS方法，但没有效果

我可以创建一个重复图案，但也不能将其设置为剪辑路径，以便剪切标题的背景色（粉色）以显示下方的主体背景

正文{
背景色：番茄；
保证金：0；
}
.标题{
位置：相对位置；
高度：100px；
背景颜色：粉红色；
溢出：隐藏；
保证金：0；
}
.标题svg{
位置：绝对位置；
底部：0；
}
div：：在{/*之后，这不起作用*/
内容：''；
高度：12px；
宽度：100%；
位置：绝对位置；
背景颜色：绿色；
-webkit剪辑路径：url（#svgPath）；
剪辑路径：url（#svgPath）；
底部：0；
保证金：0；
}

---

您可以尝试此css唯一解决方案：css线性渐变

正文{
背景色：番茄；
保证金：0；
}
.标题{
位置：相对位置；
高度：100px；
背景颜色：粉红色；
溢出：隐藏；
保证金：0；
}
.标题svg{
位置：绝对位置；
底部：0；
}
div：：之后{
内容：“；
显示：块；
位置：绝对位置；
底部：0；
宽度：100%；
高度：1.2米；
背景图片：-webkit线性渐变（45度，粉红色25%，透明26%，透明75%，粉红色75%），
-webkit线性梯度（135度，粉红色25%，番茄26%，番茄75%，粉红色75%）；
背景图像：线性梯度（45度，粉红色25%，透明26%，透明75%，粉红色75%），
线性梯度（135度，粉红色25%，番茄26%，番茄75%，粉红色75%）；
背景大小：36px 36px；}
}

正文{
背景色：番茄；
保证金：0；
}
.标题{
位置：相对位置；
高度：100px；
背景颜色：粉红色；
溢出：隐藏；
保证金：0；
}
.标题svg{
位置：绝对位置；
底部：0；
背景色：番茄；//将svg背景色设置为身体颜色
}
div：：在{/*之后，这不起作用*/
内容：''；
高度：12px；
宽度：100%；
位置：绝对位置；
背景颜色：绿色；
-webkit剪辑路径：url（#svgPath）；
剪辑路径：url（#svgPath）；
底部：0；
保证金：0；
}

如果要使用图案，则需要一个遮罩，图案不能是遮罩或剪贴画的子对象，因此遮罩有一个由图案填充的矩形。@RobertLongson感谢您提供此信息。在过去的24小时里，我发现了很多关于SVG模式和clipPath的约束。我也尝试过使用CSS来定位模式填充，但没有效果。我喜欢SVG的功能，但了解所有细节是一项严肃的研究。感谢您提供此解决方案。棘手的是，我需要锯齿效应是不对称的。谢谢你的建议！