开发者

Checkout menu without images

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

Checkout menu without images

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:

Checkout menu without images

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜