Html 店铺分期付款；CSS

我正在我的网上商店工作，我想添加阶段，如下图所示：

我的问题是要突出显示其中一个阶段，这取决于它应该显示在哪个页面上。我的HTML中有一个标准div和ul：

<div id='stages'>
    <ul>
        <li class='selected'>Cart</li>
        <li>Your Details</li>
        <li>Summary</li>
        <li>Payment</li>
        <li>Complete</li>
    </ul>
</div>

最初使用图像“bg steps.png”：

看起来不错。然而，要选择一个项目被证明太难了，因为它需要在LI的开始和结束时有一个不同的图像。有人能帮我简化一下吗

编辑：这是我的目标：

试试这个：

这里我添加了一些伪类

：before

和

：after

---

在这里，您不需要在

背景中使用图片，而且它是纯css和html制作的，使用CSS3，您不需要使用图像

它可以通过使用伪类
：before
和
：after
的纯CSS解决方案来实现。
可以使用它在每个
li
元素前后生成三角形

你可以在这里找到一个完整的工作示例

我在我的一个项目中使用了类似的技巧，它在FF、Chrome和IE10中得到了很好的支持。对于其他浏览器，您需要检查自己，因为我不测试它们。
您有什么问题？您需要彩色图像，并在选中时替换它。使用背景色而不是背景色以不覆盖图像。如果你想让它工作，你需要一个带有蓝色箭头的图像。@Corum蓝色箭头有什么帮助？因为箭头必须是白色的，李的背景必须是蓝色的…：我不确定是否正确理解了你的需要。。。如果要将所选项目的灰色箭头更改为蓝色箭头，则需要一个带有蓝色箭头的附加图像。@Chud37:代码需要改进，但CSS3中有一个完整的工作示例：。