对角条纹宽1px

Question

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

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

Looks like this：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

看起来好像浏览器在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;
}

在你的元素上平铺的假想正方形的边长将是4px宽。这意味着对角线长度为sqrt（32），当对角线测量（接近1，但不完全存在）时，条纹将为1.414 ... px，或者当平行于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;