HTML CSS-角度对象具有非锐化边

我正在尝试创建一个HTML设计，其中的对象包含有角度的边

我目前使用的是

背景：linear-gradient（）

，但边缘不尖锐，会被像素化。我使用它的原因是因为它是%的，这使得响应更容易

代码：

#容器{
位置：绝对位置；
宽度：100%；
身高：100%；
显示：块；
}
#形状{
位置：绝对位置；
z指数：6；
背景：#42145f；
宽度：45%；
身高：60%；
左：0px；
顶部：0px；
背景：线性渐变（至右下，#42145f 50%，透明50%）
}
#形状2{
位置：绝对位置；
z指数：5；
背景：#c50084；
宽度：100%；
身高：35%；
左：0px；
顶部：0px；
背景：线性渐变（至右下，#c50084 50%，透明50%）
}
#形状3{
位置：绝对位置；
z指数：4；
背景#6e2c6b；
宽度：37%；
身高：73%；
左：0px；
最高：27%；
背景：线性渐变（至右上方，#6e2c6b 50%，透明50%）
}
#形状4{
位置：绝对位置；
z指数：3；
背景：#b71234；
宽度：100%；
身高：14%；
左：0；
最高：86%；
背景：线性渐变（左上，#b71234 50%，透明50%）
}
#形状5{
位置：绝对位置；
z指数：0；
背景#8d1b3d；
宽度：20%；
身高：78%；
左：80%；
最高：22%；
背景：线性渐变（左上，#8d1b3d 50%，透明50%）
}
#形状6{
位置：绝对位置；
z指数：2；
背景：#ff5800；
宽度：22%；
身高：59%；
左：78%；
排名：0；
背景：线性渐变（至左下，#ff5800 50%，透明50%）
}
#形状7{
位置：绝对位置；
z指数：1；
背景：#fadc41；
宽度：30%；
身高：54%；
左：70%；
排名：0；
背景：线性渐变（至左下，#fadc41 50%，透明50%）
}

---

这听起来与本问题中探讨的问题类似：

---

答案是使用：

-webkit背面可见性：隐藏

在在座各位的帮助下，我找到了应用建议的

-webkit-clip-path（）

和

clip-path（）

的最终解决方案（由grinmax回答）

它在有角度的物体上提供清晰锐利的边缘

谢谢大家的帮助

代码是：

#容器{
位置：绝对位置；
宽度：100%；
身高：100%；
显示：块；
}
#形状{
位置：绝对位置；
z指数：6；
背景：#42145f；
宽度：40%；
身高：55%；
左：0px；
顶部：0px；
-webkit剪辑路径：多边形（0,0 100%，100%0）；
剪辑路径：多边形（0,0,100%，100%0）；
}
#形状2{
位置：绝对位置；
z指数：5；
背景：#c50084；
宽度：100%；
身高：35%；
左：0px；
顶部：0px；
-webkit剪辑路径：多边形（0,0 100%，100%0）；
剪辑路径：多边形（0,0,100%，100%0）；
}
#形状3{
位置：绝对位置；
z指数：4；
背景#6e2c6b；
宽度：37%；
身高：73%；
左：0px；
最高：27%；
-webkit剪辑路径：多边形（0,0,100%，100%100%）；
剪辑路径：多边形（0,0,100%，100%100%）；
}
#形状4{
位置：绝对位置；
z指数：3；
背景：#b71234；
宽度：100%；
身高：14%；
左：0；
最高：86%；
-webkit剪辑路径：多边形（0 100%，100%100%，100%0）；
剪辑路径：多边形（0 100%，100%100%，100%0）；
}
#形状5{
位置：绝对位置；
z指数：0；
背景#8d1b3d；
宽度：20%；
身高：78%；
左：80%；
最高：22%；
-webkit剪辑路径：多边形（0 100%，100%100%，100%0）；
剪辑路径：多边形（0 100%，100%100%，100%0）；
}
#形状6{
位置：绝对位置；
z指数：2；
背景：#ff5800；
宽度：22%；
身高：59%；
左：78%；
排名：0；
-webkit剪辑路径：多边形（0,100%100,100%0）；
剪辑路径：多边形（0,100%100,100%0）；
}
#形状7{
位置：绝对位置；
z指数：1；
背景：#fadc41；
宽度：30%；
身高：54%；
左：70%；
排名：0；
-webkit剪辑路径：多边形（0,100%100,100%0）；
剪辑路径：多边形（0,100%100,100%0）；
}

或者您可以简单地使用-webkit backface visibility:hidden；而不是-webkit属性，这样可以缩短代码。

也许您需要联机帮助？嗯，看起来很有趣！在firefox 50、chrome 56和Edge 38中，边缘看起来很平滑。你能贴一张像素化边框的图片吗？还有一个解决方案是将其创建为SVG吗？这是否也适用于position absolute并使其具有响应性？我将在稍后对代码进行更新，我使用了较旧的代码。我还将添加一个屏幕截图。我遇到的问题是，我想使用%而不是像素，但在边框中这是不可能的。这就是为什么我现在使用不同的样式，这是我将在稍后更新的样式。我现在不使用transform css属性，所以我认为这不起作用。我在Safari和Firefox中也看到了不清晰的一面。我的错误-对此表示抱歉。你能截屏看到什么吗？我会更新一下代码，我用的是旧代码。我还将添加一个屏幕截图。我遇到的问题是，我想使用%而不是像素，但在边框中这是不可能的。这就是为什么我现在使用不同的风格，这就是我将在稍后更新的风格。这是一种非常有趣的技术！我看到的唯一参差不齐的边缘似乎已经到了抗锯齿的极限。我不确定有没有办法解决这个问题。为了提高响应速度（或者至少适合不同的形状），使用javascript动态调整边框宽度可能是最好的选择。然而，正如@Persijn所指出的，从长远来看，SVG可能是一种更有用的方法？