CSS3 breadcrumb

I stumbled across a post by John Rohan on creating triangles in CSS and thought it would be useful for using in CSS only breadcrumbs. Basically borders are drawn by browsers at angles and you can use this to your advantage to draw triangles.

The HTML is fairly standard for a breadcrumb, an ordered list of links. I’ve then used the pseudo  :after selector to add content after each link, which is where I have used the triangle border technique to add the arrows. I have also used ems for sizing, so the breadcrumb should respond well to resizing. Firefox also has a nice transition effect for the hover state; however I’ve binned this in all other browsers because transitions with CSS generated content are not supported by them.

So far every browser I’ve tested, bar IE7, seems to like it. Take a look at the CSS3 breadcrumb on jsfiddle.