你相信以下的BAR图表是用CSS实现的吗？

<style>
   .graph {
       position: relative; /* IE is dumb */
       width: 200px;
       border: 1px solid #B1D632;
       padding: 2px;
   }
   .graph .bar {
       display: block;
       position: relative;
       background: #B1D632;
       text-align: center;
       color: #333;
       height: 2em;
       line-height: 2em;
   }
   .graph .bar span { position: absolute; left: 1em; }

</style>
<div class=”graph”>

<strong class=”bar” style=”width: 24%;”>24%</strong>

</div>

<style>

   dl {
       margin: 0;
       padding: 0;
   }
   dt {
       position: relative; /* IE is dumb */
       clear: both;
       display: block;
       float: left;
       width: 104px;
       height: 20px;
       line-height: 20px;
       margin-right: 17px;
       font-size: .75em;
       text-align: right;
   }
   dd {
       position: relative; /* IE is dumb */
       display: block;
       float: left;
       width: 197px;
       height: 20px;
       margin: 0 0 15px;
       background: url("g_colorbar.jpg");
    }
    * html dd { float: none; }
   /* IE is dumb; Quick IE hack, apply favorite filter methods for
   wider browser compatibility */

    dd div {
       position: relative;
       background: url("g_colorbar2.jpg");
       height: 20px;
       width: 75%;
       text-align:right;
    }
    dd div strong {
       position: absolute;
       right: -5px;
       top: -2px;
       display: block;
       background: url("g_marker.gif");
       height: 24px;
       width: 9px;
       text-align: left;
       text-indent: -9999px;
       overflow: hidden;
    }

</style>
<dl>

   <dt>Love Life</dt>
   <dd>
       <div style="width:25%;"><strong>25%</strong></div>
   </dd>

   <dt>Education</dt>
   <dd>
       <div style="width:55%;"><strong>55%</strong></div>
   </dd>

   <dt>War Craft 3 Rank</dt>
   <dd>
       <div style="width:75%;"><strong>75%</strong></div>
   </dd>

</dl>

<style>
   #vertgraph {
       width: 378px;
       height: 207px;
       position: relative;
       background: url("g_backbar.gif") no-repeat;
   }
   #vertgraph ul {
       width: 378px;
       height: 207px;
       margin: 0;
       padding: 0;
   }
   #vertgraph ul li {
       position: absolute;
       width: 28px;
       height: 160px;
       bottom: 34px;
       padding: 0 !important;
       margin: 0 !important;
       background: url("g_colorbar3.jpg") no-repeat !important;
       text-align: center;
       font-weight: bold;
       color: white;
       line-height: 2.5em;
   }

   #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
   #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
   #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
   #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
   #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }

</style>
<div id="vertgraph">

   <ul>
       <li class="critical" style="height: 150px;">22</li>
       <li class="high" style="height: 80px;">7</li>
       <li class="medium" style="height: 50px;">3</li>

       <li class="low" style="height: 90px;">8</li>
       <li class="info" style="height: 40px;">2</li>
   </ul>
</div>

详细解释请查看:CSS FOR BAR GRAPHS