CSS: Barras de Porcentaje
Método 1
21%
uno.html 1 <style> 2 img.porc { 3 background: white url('./css_barra_porcentaje/porc_back.png') repeat-x top left; 4 } 5 </style> 6 7 <p> 8 <img src="porc.png" alt="21%" class="porc" style="background-position: -21%;" /> 21% 9 </p>
Método 2
21%
58%
dos.html 1 <style> 2 span.porc, span.porc span { 3 display: block; 4 width: 165px; 5 } 6 span.porc { 7 background: white url('./css_barra_porcentaje/porc_back2.png') repeat-x center left; 8 } 9 span.porc span { 10 background: url('./css_barra_porcentaje/porc2.png') repeat-x center left; 11 text-align: right; 12 } 13 </style> 14 15 <p> 16 <span class="porc" style="background-position: -21%;"><span>21%</span></span><br /> 17 <span class="porc" style="background-position: -58%;"><span>58%</span></span><br /> 18 </p>