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:
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:
A Quick Demo
Oh, and feel free to fork it on GitHub!