CSS3 brought a whole new section of abilities to the frontend engineer. Personally,
box-shadow. It means that you can create whole libraries of shapes using only CSS like in this post on CSS tricks. You can even make crazy shapes that are animated without writing a single line of javscript (see this animated tree).
So when I was asked to write a triangle-based layout that has image fills in each shape, my first instinct was to go towards CSS. After a bit of hacking and trying things out, I decided to just dump that and go with SVGs (something about using transforms to do two things seemed hard… or something like that). For those who don’t know, SVGs are vector graphics (meaning they scale since the shape isn’t defined as a pixel map but in terms of relations). To this end, I sourced SVG.js, a library that is lightweight enough and nicely documented.
Armed with my library, generating triangles was a breeze. I then tried to use these as masks for the images layers, after a bit of a fight, I realised that instead of masking images with triangles, I could fill the triangles with images. After that, I had to worry about how scaled the images would look, which was fixed with some percentage-sizing of the images, as described in the documentation.