How can I create vertically repeating horizontal dashed lines in css

Question

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.

Answer 1

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/