Shop Stages & CSS - html

Question

I am working on my online shop, and I want to add stages, like in the picture below:
My problem is getting one of the stages to be highlighted, depending on the page it should be shown on. I had a standard div and ul in my HTML:
<div id='stages'>
<ul>
<li class='selected'>Cart</li>
<li>Your Details</li>
<li>Summary</li>
<li>Payment</li>
<li>Complete</li>
</ul>
</div>
And my CSS (so far):
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;
}
Originally using the image 'bg-steps.png':
Which looks nice. However to get an item selected is proving to be too hard, because it needs a different image at the begining of the LI and at the end. Can anyone help/simplify this for me? See here for a JSFiddle.
EDIT: This is my aim:

Answer 1

Try this one: jsFiddle
Here I added some pseudo classes :before and :after
In here you do not need your pictures in the background and it is made in PURE css and html

Answer 2

With CSS3, you don't need to use images.
It can be achieve using a pure CSS solution with pseudo classes :before and :after.
You can use it to generate triangles before and after each li element.
You can find a full working example in this JSFiddle.
I have used a similar trick in one of my project, and it's well supported in FF, Chrome and IE10. For other browsers, you need to check yourself because I don't test them.