What's the best practice to create a checkout (tracking) menu like below in CSS.
How to create this 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.
An, of course, as @BoltClock suggests you could use a single sprite image, accompanied by
Sample sprite image:
There is currently no discussion for this recipe.
This recipe can be found in it's original form on Stack Over Flow.