如何创建独立改变颜色的邻近非矩形元素的效果？

Question

如何操作此屏幕截图中显示的箭头：

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

（忘记渐变。）

我可以做一个包含箭头的图像，但我还需要左右两边的元素来改变颜色。

Answer 1

使用伪元素是可能的。 Chris Coyier在此解释：http://css-tricks.com/triangle-breadcrumbs/

如果您担心支持旧版本的IE，那么您可以使用IE8.js（或IE9.js）：http://code.google.com/p/ie7-js/

Answer 2

您可以使用具有透明度的PNG，每种颜色只需要一个箭头。

Answer 3

图像是它，你可以用一堆选项创建一个精灵，并在悬停时动态切换或改变。<​​/ p>

Answer 4

您可以为以下条件设置透明图像：

1. 浅蓝色向前箭头
2. 浅蓝色背面
3. 深蓝色前箭头
4. 深蓝色背面
5. 灰色前进箭头
6. 灰色回来

然后在CSS中你可以使用类似下面的东西来使它工作：

.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 {...}

没有尝试过，所以你必须进行实验。你必须弄清楚这些元素的填充/边距才能正确排列。