Making a jagged image or background color section that is responsive

slanted lines in css

https://css-tricks.com/creating-non-rectangular-headers/#svg https://codepen.io/erikdkennedy/pen/zNpXee

Also interesting: https://9elements.com/blog/pure-css-diagonal-layouts/

I chose to go with the SVG approach.

inkscape straighten line inkscape crop svg inkscape snap lines to vertical

https://inkscape-manuals.readthedocs.io/en/latest/align-and-distribute.html

svg override fill color with css