CSS漸層統計直條圖

來源:互聯網
上載者:User

用作圖工具作一個漸層的長度.看起來能好看一點(寬:187px;高15px)
本來設想是當12%時,圖片從左到12%的位置顯示,餘下的88%不顯示,但不佔地(看起來和1px的圖片底沒什麼區別).下午時去網羅了一班.發現不佔地是不太可能的.
要隱藏圖片餘下的百分比,先想到了評分.亮和暗用了一張圖片,各占圖片總高度的一半.我寫下了:
<div style="background:url(...) 12% left;width:187px;height:15px;"></div>
依次從10%-100%,見不到效果,換<span></span>這個是可以不過在盒子內必須要有內容.
昨天晚上沒寫出來.下午google了也沒有找到類4漸層的.不過從其中一個樣本中得到了靈感.
URL:http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55
中的:Complex CSS Bar Graph
馬上得到了這個:

xmlns="http://www.w3.org/1999/xhtml">


55%
55%
55%
55%
65%
75%
85%
95%
100%
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.