CSS / Tipps / Fortschrittsbalken mit CSS zeichnen[IE|M|O|S|G]

<div style="position:relative; width:100px; background-color: #C0C0C0;">
 <span style="position: absolute; width: 100%; z-index: 3; text-align: center;">84.05%</span> 
 <div style="position: relative; width: 84.05%; background-color: #00FF00; color: #00FF00;
 z-index:2;">.</div>
</div>

<div style="position:relative; width:100px; background-color: #C0C0C0;">
 <span style="position: absolute; width: 100%; z-index: 3; text-align: center;">50.22%</span> 
 <div style="position: relative; width: 50.22%; background-color: #FF8000; color: #FF8000;
 z-index:2;">.</div>
</div>

<div style="position:relative; width:100px; background-color: #A4A4A4;
 border: solid 1px #000000;">
 <span style="position: absolute; width: 100%; z-index: 3; text-align: center;">19.34%</span> 
 <div style="position: relative; width: 19.34%; background-color: #46A3FF; color: #46A3FF;
 border-right: solid 1px #FFFFFF; z-index:2;">.</div>
</div>

<div style="position:relative; width:100px; background-color: #FFFF00;
 border: solid 1px #000000;">
 <span style="position: absolute; width: 100%; z-index: 3; text-align: center;">90.10%</span> 
 <div style="position: relative; width: 90.10%; background-color: #FF6262; color: #FF6262;
 border-right: solid 1px #000000; z-index:2;">.</div>
</div>