Patrick Gregorio Patrick Gregorio - 3 months ago 12x
HTML Question

Reverse repeating linear gradient

I'm using this piece of code to create a somewhat dotted border:


.strip {
height: 5px;
width: 80px;
background: repeating-linear-gradient(90deg, transparent, transparent 10px, #ffaacd 5px, #ffaacd 30px);

I'm trying to reverse the colors by switching
and their corresponding lengths but it doesn't work. I would get a straight pink line.


Please note that I cannot use
because it affects some layout so I'd rather just use the background.


I've created a Fiddle to illustrate what I'm trying to achieve.

Basically I'm doing some form of legend and right now the strip is starting with a transparent color but I want it to start with the pink color so that it is aligned with the strip above it.


Your length offsets are a little strange. If you want hard stops, you should have the both the #ffaacd and the transparent sections have a color stop at 10px.

It works if you change it to:

background: repeating-linear-gradient(90deg, transparent, transparent 20px, #ffaacd 20px, #ffaacd 30px);

This gives you a transparent section for 20px and then a #ffaacd section for 10px. This is the opposite of the original.

See this JSFiddle for a working example.