Reading Time: < 1 minute

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:

<div class="left side triangle"> </div>
<div class="right side triangle"> </div>
<div class="top surface triangle"> </div>
<div class="bottom surface triangle"> </div>

The CSS

.triangle {
  width: 0; /*Make element as small as possible*/
  height: 0;
  border-width: 5em; /*exaggerate borders, so their mitres are visible*/
  border-style: solid;
  border-color: green;
}

/*left/right sides have no visible top/bottom, which exposes mitres */
.triangle.side{
  border-top-color: transparent; 
  border-bottom-color: transparent;
}

/*left triangle ALSO has no right border*/
.triangle.left {
  border-right:5em transparent ;
}

/* right triangle ALSO has no left border*/
.triangle.right {
  border-left:5em transparent ;
}

/*surface triangles have no left/right borders*/
.triangle.surface {
  border-left-color: transparent;
  border-right-color: transparent;
}

/*top triangles have no bottom border*/
.triangle.top {
  border-bottom: 5em transparent;
}

/*bottom triangles have no top border*/
.triangle.bottom{
  border-top: 5em transparent;
}

A Quick Demo

Oh, and feel free to fork it on GitHub!