Css 铬渲染的线性渐变非常起伏

我试图使用CSS3线性渐变在页面上添加一个功能区，但是Chrome的渲染效果比Firefox或IE的效果要差得多。Chrome中的颜色停止看起来非常像素化，但使用供应商前缀属性不起作用，因为它们不允许指定度数

#extradiv1{
位置：绝对位置；
排名：0；
右：0；
宽度：121px；
高度：71px；
背景：url（../img/ribbon.png）；
背景：线性梯度（30度，
透明61px，
rgb（25520451）61px，
rgb（25520451）76px，
rgb（22,22,22）76px，
rgb（22,22,22）91px，
透明91px
);
}

源代码也可以在

---

有什么方法可以解决Chrome中这种不稳定的渲染问题吗？

这是一个相当老的问题，但我想我会插手，以防有人还在寻找答案

如果您不担心IE大于9，transform:rotate应该会产生更好的渲染结果（透明的倾斜渐变确实会变得起伏，或者在渐变连接处出现间隙）

您可以使用两个旋转的div，或者使用一个div和关联的伪元素来实现这一点。以下是CSS：

.rotatedDiv {
    position: absolute;
    -ms-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    transform:rotate(30deg);
}

#extradiv1 {
    top: 20px;
    right: -30px;
    width: 200px;
    height: 20px;
    background: rgb(255,204,51);
}

#extradiv2 {
    position: absolute;
    top: 0;
    right: -20px;
    width: 170px;
    height: 20px;
    background: rgb(22,22,22);
}

---

小提琴手：

谢谢你抽出时间回答我的问题！