Tag Archives: tricks

How to make a triangle in CSS

Even though I’ve from time to time worked alot with front facing web, this is something I’ve never stumbled upon or even thought of. I got this from my colleague Torbjörn, and it was such a neat trick I had to share it.

Consider the follow code:
<span style="display: block; width: 0; height: 0; border: 10px solid #000; border-color: transparent transparent transparent #000; border-width: 33px 0px 33px 60px;"></span>

With so little effort you can have any triangle you like! Actually, it doesn’t stop there, you can make a whole lot of different shapes. With some labbing, and newer tech like border-radius, you can probably use it for piecharts and stuff. Use your imagination!

Tagged ,