Hatching and crosshatching refers to tight, parallel strokes drawn to suggest shadow, density and tone in illustrations. Used in everything from etchings to comics, both effects are relatively easy to create in SVG backgrounds. Because they’re very closely related to grids, I’ll address those here too.
I found a recent discussion on Reddit’s r/webdev interesting: how might one make a container appear to have a slanted bottom border, as shown above? The top-voted answer, while clever, only worked on fixed-width containers, and used a lot of CSS to achieve the effect; by sacrificing a small amount of backwards compatibility, I think there’s a better option.
This mini-lesson might be considered part of a push to re-imagine website layout: for the longest time we’ve been reliant on three-column grids and 90° angles. But with a little imagination, we can do so much more: