对角条纹宽1px

Question

我想给元素一个背景,重复1px宽的斜条纹.似乎repeating-linear-gradient应该能够做到这一点,但在Safari中呈现时:

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

看起来像这样:

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

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

看起来好像浏览器在混叠方面表现不佳,导致绑定模式不均匀.关于我如何能够解决这个问题,或者想要实现我想要做的另一种方式的任何想法？

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 提出的使用linear-gradient百分比标准的建议方法background-size.通过一些游戏,我设法获得我正在寻找的精确渐变:

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