by

Snippets: Class Friendly CSS Triangles

Until I get my snippet library up and running in WordPress, I’m storing a lot of my snippets over at GitHub. One of the first things I put up there is a super handy snippet for easy-bake CSS triangles

 A quick lowdown on using the classes

So, anything that needs to be triangleified gets the triangle class to start. After that, you can set the orientation using some super semantic classes. You have four directions for the triangle: top, bottom, left, right. For the left/right classes, be sure to add the additional class side — and for the top/bottom classes, you should add the modifying class of surface. Basically, the idea is that you string together the classes as though they were properties.

So essentially, your four triangles are produced like so:

The CSS

A Quick Demo

Oh, and feel free to fork it on GitHub!