Found a really interesting post on David Walsh’s blog about creating triangles with CSS.

The method uses a box with zero size and coloured borders to create the effect.

div.arrow-up {
float:left;
width:0px;
height:0px;
border-left:5px solid transparent; /* left arrow slant */
border-right:5px solid transparent; /* right arrow slant */
border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
margin:0 auto; /* centers the arrow within the parent container */
font-size:0px;
line-height:0px;
}

Produces the following:

I like the fact that it’s using really creative CSS to produce a solution which is, I think, lots neater and reusable than cutting out little triangle graphics. I could imagine using this in breadcrumb trails for example.

Home Categories Page

To see this effect taken to the extreme, take a look at the Union Jack created using just CSS.