Я хочу дать элемент фона с повторяющимися полосами шириной 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>
Более подробное объяснение этой головоломки здесь: согласно принципу Пифагора (и его троек), невозможно иметь квадрат (который просто состоит из двух правильных треугольников), сторонами которых являются целые числа, которые имеют диагональ, length также является целым числом.
Это потому, что 1 2 + 1 2= sqrt (2) 2. Поскольку квадратный корень из 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;
}
Боковые длины воображаемого квадрата, чередующиеся над вашим элементом, будут иметь ширину 4 пикселя. Это означает, что длина диагонали будет равна sqrt (32), а полоса будет равна 1,414... px при измерении по диагонали поперек (близко к 1, но не совсем там) или ширине 2px при измерении, параллельном оси x или y.
Большое спасибо Терри за его предложенный подход, используя стандартный linear-gradient с процентами и background-size. Немного поиграв, мне удалось получить точный градиент, который я искал:
background-image: linear-gradient(
to right top,
transparent 33%,
black 33%,
black 66%,
transparent 66%
);
background-size: 3px 3px;