Inline SVG in CSS

You can create complex shapes easily by combining SVG and CSS. Demo here of a white triangle notch implemented using inline CSS, perfect for making parallelograms. The caveats:

.box {
  background: url("data:image/svg+xml;utf8,<svg xmlns='' width='1000' height='20' version='1.1'><polyline fill='white' points='0,0 1000,0 0,20'/></svg>")
    left top / 100% auto no-repeat;

IE9+ supported, legacy IE's arent. Also, hex color codes are not supported. Use rgb(0, 100, 200) instead.