Diagonal stripes that are 1px wide

Question

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?

Answer 1

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.

Answer 2

Many thanks to Terry for his suggested approach of using a standard linear-gradient with percentages and a background-size. With a bit of playing around, I have managed to obtain the exact gradient I was looking for:

background-image: linear-gradient(     to right top,     transparent 33%,     black 33%,     black 66%,     transparent 66% ); background-size: 3px 3px;