Best to mark it up at an unordered list, because that's kind of a list you have there. Anyhow, you can do this with just CSS if you wish, except that you'd need backgrund images to get that nice texture, but that's easy enough. Here's an example of how you could do it with CSS alone:

Thanks Paul. The one thing I couldn't get right is that in IE8, the blue background overlaps the arrow corners. I set a higher z-index on them, tried every combination I could thing of and still couldn't get them to sit over the blue part. (I don't care much about IE8, but still ...) The only thing I didn't try is a negative z-index on the blue <i> element. Maybe will try that later, but IE is sleeping now, and I hate to disturb it.

PaulOB
—
2013-04-05T19:52:19Z —
#7

Hi Ralph,

ralph_m said:

Thanks Paul. The one thing I couldn't get right is that in IE8, the blue background overlaps the arrow corners. I set a higher z-index on them, tried every combination I could thing of and still couldn't get them to sit over the blue part. (I don't care much about IE8, but still ...) The only thing I didn't try is a negative z-index on the blue <i> element. Maybe will try that later, but IE is sleeping now, and I hate to disturb it.

A negative z-index would work if the blue wasn't sitting on the light gray because it will go under the light gray and be invisible. IE8 can't handle the z-index properly on :before or :after and we've seen this before a while ago.

You could place the borders in relation to the "i" element instead and sidestep the issue.