html - 1px 宽的斜条纹

Question

我希望为元素提供一个具有重复的 1px 宽对 Angular 线条纹的背景。看起来 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 上做得不好，导致 strip 图案不均匀。关于如何解决此问题或以其他方式完成我想做的事情的任何想法？

Answer 1

这里对这个难题做了更详细的解释:根据毕达哥拉斯原理(及其三元组)，不可能有一个正方形(就是两个直 Angular 三 Angular 形组合在一起)，其边是整数，对 Angular 线是length 也是一个整数。

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

这是我能得到的最接近的——指定一个整数平方，但条纹将是非整数宽度: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 像素宽。这意味着对 Angular 线长度为 sqrt(32)，并且条纹在对 Angular 线上测量时为 1.414...px(接近 1，但不完全)，或者在平行于 x 或 y 轴测量时为 2px 宽。