宽1px的斜条纹 [英] Diagonal stripes that are 1px wide

问题描述

我期望给一个元素带有重复的背景，1px宽的对角线条纹。看来 repeating-linear-gradient 应该可以做到这一点，但在Safari中呈现时：

<$ p （
45deg，black，black 1px，transparent 1px，transparent 3px
）; $ p> background-image：重复线性渐变


看起来像这样：

#thing {height：200px; background-image：重复线性渐变（45deg，黑色，黑色1px，透明1px，透明3px）;}

 < div id =thing>< / div>  

看起来好像浏览器做得不好，别名，导致不均匀的条带图案。任何关于我如何能够解决这个问题的想法，或者完成我期望以另一种方式完成的任何想法？ 解决方案

在这里对这个难题进行更详细的解释：根据毕达哥拉斯原理（及其三元组），不可能有一个正方形（它只是两个直角三角形配合在一起），其边是整数，其对角线的长度是整数。

这是因为1 ² + 1 ² = sqrt（2） ² 。由于2的平方根是一个无理数，所以这个（无论任何边长是一个整数的平方）的所有导数都会有一个无理长度的对角线。

这是我可以得到的最接近的值 - 指定一个整数正方形，但条纹将是非整数宽度： http：// jsfiddle.net/teddyrised/SR4gL/2/

  #thing {
 height：200px; 
 background-image：线性渐变（-45deg，黑色25％，透明25％，透明50％，黑色50％，黑色75％，透明75％，透明）; 
 background-size：4px 4px; 
} 
  

平铺在您的元素上的虚构平方的边长为4px宽。这意味着对角线长度将是sqrt（32），当对角线测量跨越（接近1，但不是那里）时，条带将为1.414 ... px，或者在平行于x或y轴测量时为2px宽。

I'm looking to give an element a background with repeating, 1px wide diagonal stripes. It seems that repeating-linear-gradient should be able to do this, but when rendered in Safari this:

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>

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?

解决方案

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 1² + 1² = sqrt(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.

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/

#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.

这篇关于宽1px的斜条纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！