How to create the effect of neighboring non-rectangtular elements which change color independently?

How to do the arrows shown in this screenshot:

http://i.stack.imgur.com/odpCG.png

(Forget the gradients.)

I can do a singl开发者_C百科e image containing the arrow, but I also need the elements to the left and right change colors.

It's possible with the use of pseudo elements. Chris Coyier explains here: http://css-tricks.com/triangle-breadcrumbs/

If you worried about supporting older versions of IE, then you can use IE8.js (or IE9.js): http://code.google.com/p/ie7-js/

You can use PNGs with transparency, you will need only one arrow per color.

Images is it, you can create a sprite with a bunch of options and dynamically switch or change on hover.

You could have an transparent image for the following conditions:

1. light blue forward arrow
2. light blue back
3. dark blue forward arrow
4. dark blue back
5. grey forward arrow
6. grey back

Then in the CSS you could use something like the following to get it to work:

.completed:after{ content: url(../images/lightblueforward.png); padding: 5px}
.completed:before{ content: url(../images/lightblueback.png); padding: -5px}
.current:after{...}
.current:before{...}
.notcompleted:after {...}
.notcompleted:before {...}

Haven't tried this, so you'll have to experiment. You will have to mess around with the paddings/margin on those elements to get to line up correctly.