1px宽的对角条纹

Question

我希望给一个元素的背景与重复，1px宽的对角线条纹。看起来repeating-linear-gradient应该能够做到这一点，但是当在Safari中呈现时：

background-image: repeating-linear-gradient(
    45deg, black, black 1px, transparent 1px, transparent 3px
);

Looks like this

​

#thing {
  height: 200px;
  background-image: repeating-linear-gradient( 45deg, black, black 1px, transparent 1px, transparent 3px);
}

<div id="thing"></div>

​

看起来浏览器在aliasing上做得不好，导致了不均匀的条带模式。关于如何解决这个问题，或者用另一种方式完成我想要做的事情，有什么想法吗？

Answer 1

非常感谢Terry使用带有百分比和background-size的标准linear-gradient的suggested approach。我花了点心思才弄到了exact gradient I was looking for

​

​

background-image: linear-gradient(
    to right top,
    transparent 33%,
    black 33%,
    black 66%,
    transparent 66%
);
background-size: 3px 3px;