CODEWITHSUNDEEP
htmlcsslinear-gradientsgradientstop
dokgu
dokgu

Reputation: 6040

Reverse repeating linear gradient

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.

Upvotes: 2

Views: 1257

Answers (3)

myf
myf

Reputation: 11283

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>

Upvotes: 0

MattDiMu
MattDiMu

Reputation: 5013

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>

Upvotes: 0

Jonathan Lam
Jonathan Lam

Reputation: 17351

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.

Upvotes: 1

Related Questions