Html 1px 宽的斜条纹
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23878398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Diagonal stripes that are 1px wide
提问by Kyle Cronin
I'm looking to give an element a background with repeating, 1px wide diagonal stripes. It seems that repeating-linear-gradientshould be able to do this, but when rendered in Safari this:
我希望为元素提供具有重复的 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>It looks as though the browser's doing a poor job of aliasing, resulting in an uneven banding pattern. Any ideas on how I might be able to fix this, or to accomplish what I'm looking to do another way?
看起来浏览器在aliasing 方面做得很差，导致条带模式不均匀。关于如何解决此问题或以另一种方式完成我想要做的事情的任何想法？
回答by Terry
A little more elabourate explanation of the conundrum here: according to the Pythagoras principle (and its triples), it is impossible to have a square (which is simply two right triangles fit together) whose sides are integers that has a diagonal whose length is an integer number, too.
对这里的难题进行更详细的解释：根据毕达哥拉斯原理（及其三元组），不可能有一个正方形（简单地将两个直角三角形组合在一起），其边为整数且对角线的长度为整数也是。
This is because 12+ 12= sqrt(2)2. Since the square root of 2 is an irrational number, all derivatives of this (a square of whatever side length that is an integer number) will have a diagonal of irrational length.
这是因为 1 2+ 1 2= sqrt(2) 2。由于 2 的平方根是一个无理数，因此它的所有导数（无论边长为整数的平方）都将具有无理长的对角线。
This is the closest I can get — specify an integer square, but the stripes will be of non-integer width: http://jsfiddle.net/teddyrised/SR4gL/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;
}
The side lengths of the imaginary square, tiled over your element, will be 4px wide. This means the diagonal length would be sqrt(32), and the stripe will be 1.414...px when measured diagonally across (close to 1, but not quite there), or 2px wide when measured parallel to the x or y axis.
平铺在元素上的假想正方形的边长将为 4px 宽。这意味着对角线长度将是 sqrt(32)，当对角线测量时，条纹将是 1.414...px（接近 1，但不完全是），或者当平行于 x 或 y 轴测量时宽度为 2px。
回答by Kyle Cronin
Many thanks to Terry for his suggested approachof using a standard linear-gradientwith percentages and a background-size. With a bit of playing around, I have managed to obtain the exact gradient I was looking for:
非常感谢 Terry提出的使用linear-gradient带有百分比和background-size. 通过一些玩耍，我设法获得了我正在寻找的确切渐变：
background-image: linear-gradient(
to right top,
transparent 33%,
black 33%,
black 66%,
transparent 66%
);
background-size: 3px 3px;
