Css 背景图像，线性梯度锯齿边缘的结果需要平滑边缘

我试图使图像的底部指向。我试图通过在底部生成两个三角形来获得这种效果。他们必须作出反应。在互联网上搜索了很多不符合我要求的例子后，这是迄今为止我制作的最好的

body，
html{
身高：100%
}
.形象{
宽度：1410px；
右边距：自动；
左边距：自动；
高度：500px；
溢出：隐藏；
位置：相对位置；
}
.指针{
高度：50px；
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
}
.三角饶舌歌手{
宽度：50%；
高度：50px；
浮动：左；
}
.左三角{
宽度：100%；
高度：10px；
左：0px；
顶部：0px；
背景图像：线性渐变（至右上方，#ffffffff 50%，透明50%）；
}
.直角三角形{
宽度：100%；
高度：10px；
右：0px；
顶部：0px；
背景：线性渐变（左上，#ffffffff 50%，透明50%）
}

---

不幸的是，当我们使用倾斜的

线性渐变图像时，这种情况总是会发生，目前克服这种现象的唯一方法似乎是避免颜色的硬停止（即，不要将一种颜色的停止点作为下一种颜色的开始点）。使第二种颜色的起点离第一种颜色的停止点稍远一点将创建一个模糊区域，并使其看起来更平滑。这仍然不是100%完美，但比锯齿状边缘要好

.lefttriangle{
宽度：100%；
高度：10px；
左：0px；
顶部：0px；
背景图像：线性渐变（右上，#ffffff 48%，透明50%）；/*注意停止点和开始点的变化*/
}
.直角三角形{
宽度：100%；
高度：10px；
右：0px；
顶部：0px；
背景：线性渐变（左上，#ffffff 48%，透明50%）；/*注意停止点和开始点的变化*/
}


body，
html{
身高：100%
}
.形象{
宽度：1410px；
右边距：自动；
左边距：自动；
高度：500px；
溢出：隐藏；
位置：相对位置；
}
.指针{
高度：50px；
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
}
.三角饶舌歌手{
宽度：50%；
高度：50px；
浮动：左；
}
.左三角{
宽度：100%；
高度：10px；
左：0px；
顶部：0px；
背景图像：线性渐变（至右上方，#ffffffff 48%，透明50%）；
}
.直角三角形{
宽度：100%；
高度：10px；
右：0px；
顶部：0px；
背景：线性梯度（左上，#ffffff 48%，透明50%）；
}
刚刚使用
calc（50%-1px）


没有任何模糊，只是一个平滑的边缘

编辑：。。显然不是在Safari？。
谢谢Harry，我会看看CSS转换路径，剪辑路径很好，但我仍然需要IE支持：（一旦我产生了我需要的结果，我会更新这个Q&A。Harry，我已经使用了你提供的链接中建议的转换代码。请看，你有没有进一步的建议，因为它没有像他们的代码片段那样产生一条清晰的线条。实际上它在chrome中有。但在safari中没有。。safari对此有任何反分析修复吗？@user3072439:请参考我刚才添加到答案中的片段（最后一个）。它应该适用于所有浏览器，如果不适用，恐怕除了剪辑路径之外别无选择。对我来说，48%和50%的图像太模糊了，因为我试图获得一条直线。49.9%和50.1%的图像效果很好。但当你寻找完美时，你的眼睛会看到边缘有一个小小的切口。这很好，但计算技巧并不能产生更好的效果让我们来看一下这个问题中使用的代码片段。因此，似乎我们应该选择适合我们具体情况的代码片段。我在Safari和Edge中使用calc（50%-1px）时也遇到了问题。我看到了一些解决方案，但老实说，在所有浏览器中，49.9%的代码看起来都很棒。在firefox和calc中测试的代码看起来更好。9%
background: linear-gradient(7deg, currentColor calc(50% - 1px), transparent 50%);