.box {
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='20' version='1.1'><polyline fill='white' points='0,0 1000,0 0,20'/></svg>") left top / 100% auto no-repeat
}
Demo here of a white triangle notch implemented using inline CSS, perfect for making parallelograms. The caveats:
- IE9+ supported, legacy IE’s arent.
- Hex color codes are not supported. Use
rgb(0, 100, 200)
instead.