6

I created vertically repeating horizontal lines (solid) using following css

.solid-lines {
  background-image: linear-gradient(#ccc 1px, transparent 1px);
  background-size: 100% 30px;
}

JS Bin

Now I need same background but dashed lines instead of solid lines. Is it possible using css only.

rkb
  • 514
  • 2
  • 9
  • 19
  • Possibly a duplicate of http://stackoverflow.com/questions/22379502/css-gradient-to-produce-dotted-line. – Harry Aug 17 '14 at 09:46

1 Answers1

13

One of the ways this can be obtained is by stacking gradients. You will have one gradient representing the colored-horizontal lines, then adding in white vertical lines as a second gradient. (It can be white, or what ever color your background is).

.solid-lines {
  padding-left:5px;
  background-image:linear-gradient(to right, #fff 5px, transparent 1px), linear-gradient(#ccc 1px, transparent 1px);
  background-size: 20px 30px;
}

The added padding is for the offset of the first line. The background size (20px) represents the space in-between each white vertical line, and '5px' is the size of that line. Tweak these numbers to get the dashed look you want.

http://jsbin.com/weyozutawiva/1/

Mathew Kleppin
  • 302
  • 2
  • 7