CSS Triangles

Posted by on Feb 20, 2011 in Code Chat | No Comments
CSS Triangles

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 {
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 */

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.

Leave a Reply