html - 购买舞台和 CSS

Question

我正在开发我的网上商店，我想添加阶段，如下图所示:

我的问题是要突出显示其中一个阶段，具体取决于应在其上显示的页面。我的 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>

还有我的 CSS(到目前为止):

div#stages {
    position: relative;
    display: block;
    height: 40px;
    text-align: center;
}
#stages > ul > li:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
} 
#stages > ul > li {
    text-align: center;
    width: 110px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    background: #DDD url(/img/bin/bg-steps.png) no-repeat top right;
    margin: -3px;
    text-indent: -15px;
}
#stages > ul > li.selected {
    background: #306bb4 url(/img/bin/bg-steps.png) no-repeat bottom right;
}
#stages > ul > li:last-child {
    background: #DDD!important;
    padding-right: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

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

看起来不错。然而，要选择一个元素被证明太难了，因为它需要在 LI 开始和结束时使用不同的图像。谁能帮我/简化这个？ See here for a JSFiddle.

编辑:这是我的目标:

Answer 1

试试这个:jsFiddle

这里我添加了一些伪类:before和:after

在这里你不需要你的图片在背景中，它是用纯css和html制作的