CSS Stripes, repeating-linear-gradient bug

Question

I have a striped divider in CSS, with repeating linear gradient, but it is doing some strange thing, here is an image :

As you can see, the thickness of some of the stripes are not the same, I would like to have the striped divider like this, but all with the same "font-weight", I tried to fix the code adding or reducing pixels, but not working

Here is the code :

 .striped_divider { height: 20px; background: -webkit-repeating-linear-gradient(135deg, transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px); background: -o-repeating-linear-gradient(135deg, transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px); background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px); } 

 <div class="striped_divider"></div> 

Answer 1

You can do nothing, this is how gradient are rendred when we deal with small close values (especially in Google Chrome, in Fiferfox it should be better).

Increase the values and you will see that the effect will slowly disappear:

 .striped_divider0 { height: 20px; margin:5px; background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px); } .striped_divider { height: 20px; margin:5px; background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 8px); } .striped_divider1 { height: 20px; margin:5px; background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 10px); } .striped_divider2 { height: 20px; margin:5px; background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 15px); } 

 <div class="striped_divider0"></div> <div class="striped_divider"></div> <div class="striped_divider1"></div> <div class="striped_divider2"></div> 

You can try skew transformation, it should give better result:

 .striped_divider { height: 20px; margin: 5px; background: repeating-linear-gradient(to right, transparent 2px, transparent 9px, #cccccc 10px, #cccccc 10px); transform: skew(-45deg); } .striped_divider1 { height: 20px; margin: 5px; background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px); } 

 <div class="striped_divider"></div> <div class="striped_divider1"></div> 

Answer 2

As you can see in the example below (I've added a css zoom) the lines are indeed the same width. As @Roy already said, it's just an optical illusion.

Edit: I noticed I didn't provide you with a possible solution. As already noted by @Roy, a possible solution would be to repeat an image. The image doesn't have to be particularly high quality, so I don't think it will influence your performance.

 .striped_divider { height: 20px; background: -webkit-repeating-linear-gradient(135deg, transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px); background: -o-repeating-linear-gradient(135deg, transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px); background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px); transform: scale(2.5); } 

 <div class="striped_divider"></div>