演示效果截图

用到的图片

CSS代码

<style type="text/css">
ul.graph{
margin: 0;padding: 0;list-style-type: none;}
ul.graph li{
margin-bottom: .5em;padding: .2em;
background: #600;color: #fff;}
ul.graph li.percent20{
background: url(graph20.jpg) repeat-y 20% 0;}
ul.graph li.percent40{
background: url(graph40.jpg) repeat-y 40% 0;}
ul.graph li.percent60{
background: url(graph60.jpg) repeat-y 60% 0;}
ul.graph li.percent80{
background: url(graph80.jpg) repeat-y 80% 0;} 
</style>

HTML代码

<ul class="graph">
<li class="percent20">20%</li>
<li class="percent40">40%</li>
<li class="percent60">60%</li>
<li class="percent80">80%</li>
<li>100% www.865171.cn</li>
</ul>