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

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?