css - Chrome线性渐变错误

我有一个重复的线性渐变，如下所示:

.placeholder {
background: repeating-linear-gradient(to top right, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent;
border: 1px solid #000000;
float: left;
height: 110px;
width: 120px;
}

但是在Chrome，Mac和Opera上的Firefox中，外观会偏斜:

当处于正方形时，它可以正常工作，但是当变为矩形时，它会变成锯齿状-在所有其他浏览器中都不会出现这种情况。

是什么原因造成的？

jsfiddle

最佳答案

也许你想要:

.placeholder {
background: repeating-linear-gradient(45deg, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent;
border: 1px solid #000000;
float: left;
height: 110px;
width: 120px;
}

？

关于css - Chrome线性渐变错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16694669/