1px 宽的斜条纹

Question

我希望为元素提供具有重复的 1 像素宽对角线条纹的背景。似乎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

在这里对这个难题进行更详细的解释：根据毕达哥拉斯原理（及其三元组），不可能有一个正方形（就是两个直角三角形组合在一起），其边是整数，对角线长度也是一个整数。

这是因为 1² + 1² = sqrt(2)²。由于 2 的平方根是一个无理数，因此它的所有导数（任何边长为整数的平方）都将有一条无理数的对角线。

这是我能得到的最接近的值 - 指定一个整数正方形，但条纹将是非整数宽度：http://jsfiddle.net/teddyrised/SR4gL/2/

#thing {
    height: 200px;
    background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
    background-size: 4px 4px;
}

平铺在您的元素上的假想正方形的边长将为 4 像素宽。这意味着对角线长度将是 sqrt(32)，当对角线测量时条纹将为 1.414...px（接近 1，但不完全在那里），或在平行于 x 或 y 轴测量时为 2px 宽。

Answer 2

非常感谢 Terry 的suggested approach 使用标准的linear-gradient 和百分比和background-size。玩了一会儿，我设法获得了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;