Checkout menu without images

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

How to create 开发者_如何学Gothis menu without images? e.g. With CSS triangles?

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: