Can I convert an image to CSS3?

1. Make the white areas transparent (colour to alpha in GIMP)
2. Convert the image to a data URI (it's optional but it will make your site load faster)
3. Use the url in (2) as the background-image and use any background-color you want.

Use this to convert an image: http://codepen.io/blazeeboy/pen/bCaLE I think it's much better to use converted images because browsers load them faster.

I think CSS is the wrong thing to use for this. Yes, it is possible to create a lot of shapes using CSS, but there are limitations, and in any case, drawing shapes with CSS is a bit of a hack, even when it's just a simple triangle.

Rather than CSS, I would suggest SVG is the appropriate tools for this job.

SVG is a graphics format for vector graphics that can be embedded in a site, and can be created or altered via Javascript directly within the site. Changing the colour and shape of a simple polygon is about as easy as it gets with SVG.

The other advantage of using SVG is that because it's a vector graphic, it's scalable, so you could display it at any size.

The only down-side of SVG is that it isn't supported by old versions of IE (IE8 and earlier). However, these browsers do support an alternative language called VML, and several good Javascript libraries exist which will work with either, thus allowing you complete cross-browser compatibility. The one I'd recommend is Raphael.js.

So a tiny (and very easy) bit of Javascript code instead of a very messy bit of CSS. Seems like a winner to me.