Ei pessoal,
eu tive um problema, aquele “display: table;” e “posição: relativa” não funcionam no Firefox. Por isso tenho dois exemplos para vocês – um com a solução, que funciona e outro, que não funciona no Firefox.
Não testei em outro navegador. Apenas Chrome e Firefox
HTML
<body>
<div class="wrap">
<ol class="group">
<li class="processed"><div>Step1</div></li>
<li><div>Step2</div></li>
<li><div>Step3</div></li>
</ol>
</div>
</body>
CSS
body {
margin: 25px;
}
.group {
content: "";
display: table;
clear: both;
}
ol {
border: 1px solid #ccc;
display: table;
table-layout: fixed;
}
li {
display: table-cell;
background-color: #fff;
padding: 10px;
}
.processed {
background-color: #f2f2f2;
}
.processed > div {
position: relative;
}
.processed > div:before {
content: '';
background-color: #fff;
position: absolute;
right: -10px;
top: -10px;
width: 10px;
height: 38px;
}
.processed > div:after {
content: '';
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 15px solid #f2f2f2;
position: absolute;
right: -15px;
top: -10px;
}
DEMOS
Boa solução: http://jsfiddle.net/W3xmd/2/ <br>
Solução ruim: http://jsfiddle.net/5Aen7/