New list items shadowing previous items due to negative margin - html

Question

I'm working on a step indicator which I implemented as a list:
<ol>
<li>Step 1</li>
<li class="active">Step 2</li>
<li>Step 3</li>
</ol>
Each list element has a rounded edge to it's right in order to indicate progress, so I have the following CSS:
li{
display: block; background-color: white; width: 33%; border: 1px solid #ddd; text-indent: 40px;
float: left;
margin: 0 0 0 -20px;
border-radius: 0 15px 15px 0;
}
My problem is that later elements are shadowing the earlier, thus the rounded edge are hidden. I've tried to set a decreasing z-index for each element, but it doesn't work (besides I couldn't use this solution anyway). I acheive the desired presentation by changing to float:right but that renders the list items in descending order...
Check this jsfiddle for details: http://jsfiddle.net/fMRbr/

Answer 1

You can use the :before
li{
display: inline-block;
width: 33%;
margin: 0 0 0 -20px;
border: 1px solid #ddd;
border-radius: 0 15px 15px 0;
background-color: white;
text-indent: 40px;
position: relative;
}
li.active{
background-color: red;
}
li:before{
content: '';
width: 15px;
height: 19px;
display: inline-block;
background: #fff;
border: 1px solid #ddd;
border-width: 0 1px 1px 0;
border-radius: 0 15px 15px 0;
position: absolute;
top: 0;
left: -3px;
}
li.afteractive:before {
content: '';
width: 15px;
height: 19px;
display: inline-block;
background: #f00;
border: 0;
border-radius: 0 15px 15px 0;
position: absolute;
top: 0;
left: -3px;
}
<ol>
<li class="active">Step 1</li>
<li class="afteractive">Step 2</li>
<li>Step 3</li>
</ol>
<br /><br />
<ol>
<li>Step 1</li>
<li class="active">Step 2</li>
<li class="afteractive">Step 3</li>
</ol>
<br /><br />
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li class="active">Step 3</li>
</ol>

Answer 2

Instead of using border-radius and negative margin values, have you considered a Tbackground image at the top right of each <li> which looks like this:
The active (red) <li> would have a similar background but colored red. The result should look something like this:

Answer 3

Add a span tag to your li's with display: inline-block so they automatically grow to the right width:
html
<ol>
<li><span>Step 1</span></li>
<li class="active"><span>Step 2</span></li>
<li><span>Step 3</span></li>
</ol>
css
li {
display: block;
float: left;
width: 33%;
margin: 0 0 0 -20px;
background-color: white;
text-indent: 40px;
}
li.active {
}
li.active span {
background-color: red;
}
li span {
display: inline-block;
border: 1px solid #ddd;
border-radius: 0 15px 15px 0;
padding-right: 10px;
}
See a jsfiddle of this solution here:
http://jsfiddle.net/c4urself/HYQSJ/