I've recently been thinking about timelines written purely in html. The current idea in my head is a concept of time along the top - some sort of bar with dates for example and below that a list of projects with an arrow to the left of them where the start of the arrow corresponds to the start date of that project and the end of the arrow (the tip of the arrow head) represents the end date or possibly the current date if the project is still on going at the current time (i haven't quite worked that out).

Anyway, I wanted to do this without images and it seems that you can with pure css. A while ago I came across this super cool jquery plugin and bookmarked it on delicious. This jquery plugin made use of an interesting css illusion through borders (a good website on the technique used here is also in my delicious feed - find the link here.

Anyway I assumed I could use the same technique to do the same and it turns out as recent Nobel peace prize winner Barack Obama would say..."Yes we can!"

I've not perfected the technique in IE yet but it seems to work fine in Firefox, Safari and Opera. See the results and give me your feedback as a comment to this post.

CSS arrows without images