How to create vertically repeating horizontal dashed lines in css
I have created vertically repeating horizontal lines (solid) using the following css
.solid-lines {
background-image: linear-gradient(#ccc 1px, transparent 1px);
background-size: 100% 30px;
}
Now I want the same background, but with dotted lines instead of solid lines. Is it possible to only use css.
+3
source to share
1 answer
One way this can be achieved is by stacking gradients. You will have one gradient representing colored horizontal lines and then adding white vertical lines as the second gradient. (It can be white or whatever your background color 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 applied to offset the first line. The background size (20px) represents the space between each vertical vertical line, and "5px" is the size of that line. Tweak these numbers to get the dotted look you want.
+8
source to share