Why are CSS lines not sharp if not at multiples of 45 degrees?

Question

When using repeating-linear-gradient, I notice that unless the gradient is rotated at an angle which is a multiple of 45 degrees, the lines are not sharp and instead are very blocky.

Here is a Codepen that illustrates this issue. As you can see, the top three are very sharp (they are all rotated at multiples of 45 degrees) whereas the bottom three (not rotated at multiples of 45 degrees) are blocky and pixelated.

For example, in the code below, div.fourfive gives a very sharp line, whereas div.onezerozero gives a blocky and pixelated one.

div.fourfive {
  background: repeating-linear-gradient(45deg, 
        black, black .5em, #CE360A 0, #CE360A 1.2em);
}

div.onezerozero {
    background: repeating-linear-gradient(100deg, 
        black, black .5em, #CE360A 0, #CE360A 1.2em);
}

What is the reason for this?

Answer 1

The edges are not anti-aliased. Because of the abrupt colour changes, the rendering engine doesn't create a smooth transition. It doesn't have to be smooth if it's intended to be abrupt!

However, even as little as a 0.1 em distance between colours will change that; then there will be a transition.

div.onezerozero {
  background: repeating-linear-gradient(100deg, 
    black, black .4em, #CE360A .5em, #CE360A 1.1em, black 1.2em);
}

http://codepen.io/anon/pen/GprPjd

Will that do?