CSS: parallel lines, diamond grid, polar grid

By Xah Lee. Date: .

css parallel lines

example. diamond grid

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”. 
.xdiamondgrid {
 --xc: hsl(0 0 90 / 50);
 background-image:
  repeating-linear-gradient(45deg, var(--xc) 0, var(--xc) 1px, transparent 1px, transparent 30px),
  repeating-linear-gradient(-45deg, var(--xc) 0, var(--xc) 1px, transparent 1px, transparent 30px);
 height: 9rem;
 margin: 1rem;
 padding: 0.5rem;
}

CSS gradients