CSS Gradient Statistical Column Chart_Experience Exchange

Use the drawing tool to make a gradient length. It will look better (width: 187px; height 15px)
The original idea is that when 12%, the picture is displayed from the left to the 12% position, and the remaining 88 % is not displayed, but it does not occupy an area (it looks no different from the bottom of the 1px image). In the afternoon, I went to search for a group of people and found that it is impossible to not occupy an area.
To hide the remaining percentage of the image, first think of it I used one image for light and dark, each accounting for half of the total height of the image. I wrote:

In order from 10% to 100%, no effect is seen. Change to . This is OK but there must be content in the box.
I didn’t write it out last night. I googled it this afternoon. I couldn't find a type 4 gradient either. But I got inspiration from one of the examples.
URL: http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id= 55
in: Complex CSS Bar Graph
Got this right away:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Untitled Document</title> <style type="text/css"> dl{margin:0;padding:0;width:187px;} dd{position:relative;display:block;float:left;width:187px;height:15px; margin:0;border:1px solid #eee;} * html dd{ float: none; } dd div{position:relative;background:url("../image/default/Percent.gif");height:15px;width:100%;text-align:right;} </style> <dl> <dd> <div style="width:5%;"></div> </dd> </dl> <dl> <dd> <div style="width:15%;"></div> </dd> </dl> <dl> <dd> <div style="width:25%;"><strong>55%</strong></div> </dd> </dl> <dl> <dd> <div style="width:35%;"><strong>55%</strong></div> </dd> </dl> <dl> <dd> <div style="width:45%;"><strong>55%</strong></div> </dd> </dl> <dl> <dd> <div style="width:55%;"><strong>55%</strong></div> </dd> </dl> <dl> <dd> <div style="width:65%;"><strong>65%</strong></div> </dd> </dl> <dl> <dd> <div style="width:75%;"><strong>75%</strong></div> </dd> </dl> <dl> <dd> <div style="width:85%;"><strong>85%</strong></div> </dd> </dl> <dl> <dd> <div style="width:95%;"><strong>95%</strong></div> </dd> </dl> <dl> <dd> <div style="width:100%;"><strong>100%</strong></div> </dd> </dl>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before it can be executed]

Brothers who have the same needs can refer to it