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>\nWhat 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.
Sketching with CSS will teach you how to design in the browser.
Blow away your clients with your fast turnaround time. Bend CSS layouts to your will. Show your clients comps they can actually click on.
Get a free chapter and an 8 day email course on rapid prototyping in the browser.
