CSS: parallel lines, diamond grid, polar grid

By Xah Lee. Date: .

parallel lines

xtodo

rectangular grid

xtodo

polar grid

xtodo

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