I needed triangles
I needed some flexible triangles for a design element on a landing page for my latest project. I looked at a few different methods but none of them looked quite look right. Gradients ended up with jagged edges, borders weren't flexible, etc. This technique uses a unicode triangle character and then uses CSS3 transforms and viewport sized typography to scale it to the size I wanted.
The benefit of this technique is that for browsers that render fonts well this triangle has a very smooth edge. Plus I got a little geeky pleasure out of hacking a unicode character to be a design element.
The code
b'\n
<div class="triangle dark animate"><span class="triangle">\xe2\x96\xbc</span></div>\n
What it looks like
Caveats
Viewport units are not well supported, but neither are gradients. It doesn't look that great on Windows browsers/machines, but it looks great on every Mac I've tested it on.