Reverse repeating linear gradient

Question

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

CSS

.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 transparent and #ffaacd and their corresponding lengths but it doesn't work. I would get a straight pink line.

Note

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

Edit

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.

@PatrickGregorio I don't see a problem with just switching the colors: https://jsfiddle.net/dhfrra67/1/ — Jonathan Lam, Jun 23 '16 at 21:23
@JonathanLam yes simply switching them works but the length of the pink line should be longer than the transparent. — dokgu, Jun 23 '16 at 21:25
@JacobGray Simply switch the colors but keep the length of each color remain. — dokgu, Jun 23 '16 at 21:26
@JacobGray Right now I have a strip that starts with a short transparent followed by a long pink. I want them to change that into a strip that starts with a long pink followed by a short transparent. I'm creating a legend of some sort. — dokgu, Jun 24 '16 at 14:12
@JacobGray I've added an `Edit` clause in my question please check it out. Hopefully that helps you understand my situation. — dokgu, Jun 24 '16 at 14:21

score 1 · Accepted Answer · answered Jun 23 '16 at 21:29

1

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.

answered Jun 23 '16 at 21:29

Jonathan Lam

16,831
17
68
94

1

This is what I was looking for. I did have to switch the colors but I'm fine with that. Yeah I didn't understand the offsets but with your answer I got a bit of an idea. Thanks! – dokgu Jun 24 '16 at 14:26

score 0 · Answer 2 · answered Jun 23 '16 at 21:40

0

Even though it's not what u directly asked for, I suggest you using CSS outline as it does exactly what u want (a dotted border that doesn't affect layout) and is much simpler:

.elem {
  width: 200px;
  height: 200px;
  outline: 2px dotted hotpink;
}

<div class="elem"></div>

answered Jun 23 '16 at 21:40

MattDiMu

4,873
1
19
29

Isn't this just like a border? I need the color to be on the body of the element not on the sides. – dokgu Jun 24 '16 at 14:24
I've added an `Edit` clause in my question please check it out. Hopefully that helps you understand my situation. – dokgu Jun 24 '16 at 14:24

score 0 · Answer 3 · answered Jun 23 '16 at 21:58

For getting inverse pattern you must swap colours only, not lengths. Colour-stop value lengths should be in successive order, if smaller follows greater (like the ...transparent 10px, #ffaacd 5px... in your snippet) later value is clamped to former (ie 10px in your case).

Some proof-of concept variation with sides:

.strip {
  background: repeating-linear-gradient(to right, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to bottom, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to right, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to bottom, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%);
  background-size: 1000px 5px, 5px 1000px, 1000px 5px, 5px 1000px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: top center, center right, bottom center, center left;
}

.strip-inv {
  background: repeating-linear-gradient(to right, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to bottom, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to right, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to bottom, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%);
  background-size: 1000px 5px, 5px 1000px, 1000px 5px, 5px 1000px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: top center, center right, bottom center, center left;
}

<textarea class="strip">resize me</textarea> <textarea class="strip-inv">resize me</textarea>

Reverse repeating linear gradient

CSS

Note

Edit

3 Answers3