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 2 +1 2 = sqrt（2）2。由于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宽。