Strange bug with css3 gradient stripes


I`m trying to create 135 degrees classic candy stripe using pure css3. After some reading, and trying I finally am pretty close to success, but there is an annoying problem that keep bugging me.

Here is my example with code: and without As you can probably see now, there is some weird stuff at the left side of the pattern. So the question is - what is this and how can I make it go away? P.S. chrome users may see that stripes are pretty messy - additional thanks if somebody can find how to fix it.

Problem courtesy of: Amantel


You can do this with one single repeating-linear-gradient.

repeating-linear-gradient(135deg, #ff6d81, #ff6d81 8px, #fff 9px, #fff 16px, #00B2CB 17px, #00B2CB 24px, #fff 25px, #fff 32px);

Here it is in action.

The first property is the angle of the gradients, then you can add as many gradients as needed, usually pairs of 'start' and 'stop' points.

More information here.

The MDN is a really good javascript and CSS resource if you haven't got it bookmarked.

Solution courtesy of: Jack Bracken


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.