Checkout menu without images

Problem

What's the best practice to create a checkout (tracking) menu like below in CSS.

enter image description here

How to create this menu without images? e.g. With CSS triangles?

Problem courtesy of: mm1

Solution

You can use the CSS triangles, as described on CSS-Tricks. Then, apply CSS-gradient to your background. Oh, and there is a slight border-radius needs to be applied on the first (and, probably, last) element.

Unfortunately, as far as I know, you cannot apply CSS-gradients to the triangular part, since its background is actually the color of the border.

And, well, the gradients don't work well across all browsers, so you will have to fallback to a plain image for older versions thereof.

UPDATE: An, of course, as @BoltClock suggests you could use a single sprite image, accompanied by :before or :after pseudo-elements.

Sample sprite image:

Sample sprite

Solution courtesy of: Lapple

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.