旋转：在伪元素之后的CSS渲染错误

我当然希望我没有错过关于这一点的讨论：

我使用以下CSS代码定义“：after”-伪元素以在

顶部创建三角形（

看起来相同）：

div{
填充顶部：20px；
}
p{
位置：相对位置；
宽度：200px；
高度：100px；
显示：块；
背景色：#ccc；
利润率：75px自动0自动；
}
p:之后{
内容：“；
位置：绝对位置；
顶部：-35px；
宽度：50px；
高度：50px；
左：15%；
背景：#ccc；
边框：10px实心#fff；
边框颜色：#fff#fff#ccc#ccc；
变换：旋转（-45度）；
剪辑路径：多边形（0,100%0,100%100%）；
}
.黑暗{
背景色：#333；
}
.黑暗p:之后{
边框：10px实心#333；
边框颜色：#333#333#ccc#ccc；
}

这个问题似乎与角度有关，特别是任何非直角度的角度

---

相关问题

在渐变中，当从一种颜色到下一种颜色有硬停止时，就会发生这种情况，解决方法是避免硬停止，并给颜色过渡的空间，这样我们就看不到像素

div{
高度：300px；
宽度：300px；
显示：内联块；
}
[问题]{
背景：线性梯度（30度，黑色50%，橙色50%），无重复；
}
[解决方案]{
背景：线性梯度（30度，黑色49%，橙色50%），无重复；
}

浏览器渲染效果最佳。如果您有意触发GPU加速，例如使用

transform:translate3d（0,0,0），您会得到相同的结果吗？不幸的是，这看起来并不好。这是一个说明问题的工作片段？感谢您详细的回答！我的问题的关键似乎是
背景剪辑：内容框
，它“[…]在元素填充的外部边缘剪裁背景，并且不让背景延伸到边框。”（css tricks.com）这对我来说是新的。@Niko是的，这正是我的想法，或者你可以使用
线性渐变
，阻止它在边框下重复，因为它被认为是一种不同于普通颜色的图像，而且解释也不是100%完整，我只是保留了我所知道的和相关的内容。