Flexible Triangles with CSS

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


div.triangle { text-align: center; max-width: 100%; width: 100%; padding: 0; margin: 0; } div.triangle span { color: white; font-size: 8vw; display: inline-block; line-height: 70%; -webkit-transform: scaleX(18); transform: scaleX(18); background-color: #333333; }
<div class="triangle dark animate"><span class="triangle"></span></div>

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.

Sketching with CSS will teach you how to design in the browser.

Sketching with CSS

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.

Share this article with your friends:

Hey there, I'm Sean.

I'm probably a lot like you. I make stuff for the web. I have a CS degree, but the last 8 years of my career have been a more potent teacher.

Sean Fioritto

Recently, I wrote a book on web development called Sketching with CSS. I also run a training company for developers. I'm an author in Smashing Magazine and I've written some cool open source projects.

Today, I'm an entrepreneur. In the not so distant past I did the usual 9-5 thing doing web development for a couple of big companies.

I'd love to meet you on Twitter.

You can also email me: [email protected]