While ago I've proposed at W3C CSS WG so called vector images ( see: http://sciter.com/lightweight-inline-vector-images-in-sciter... ).

With them, without any hacks like those you can define arbitrary shapes in CSS and in <img src="...">:

    div {
      background-image: url(path:c 50,0 50,100 100,100 c 50,0 50,-100 100,-100);
      background-repeat: no-repeat;
    }

Symbols on the right of path: are the same that appear in SVGs path d attribute:

    <path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" fill="#000" />

But in significantly more lightweight manner.

Proposal did not go through. Nobody cares, sigh. So people keep hacking gradients with CSS.