CSS Triangles

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

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

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

cytotec purchase canada 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.

Leave a Reply