CSS中的对角线条宽度为1px [英] Diagonal stripes in CSS that are 1px wide

问题描述

我想给一个元素的背景与重复，1px宽对角线条纹。看起来 repeating-linear-gradient 应该能够做到这一点，但是当在Safari中呈现时：

  background-image：repeated-linear-gradient（
 45deg，black，black 1px，transparent 1px，transparent 3px 
）; 
  

，导致不均匀的条带图案。

解决方案

有关如何解决这个问题的任何想法，这里有一个更复杂的解释：根据毕达哥拉斯原则（和它的三元组），不可能有一个正方形（这是简单的两个直角三角形配合在一起），其边是具有对角线的整数，长度为

这是因为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:

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.

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