CSS3 - 進度條設計

Question

我想給我的網站上的進度條提供一個很好的風格（他們都使用jQuery UI）。 我想它看起來像這樣：（有一個漂亮的斜角效果和下面一個不錯的進度指示器）

我試着打了一下用CSS3來得到這樣的事情，但我只是找不到一個好辦法做到這一點，我的嘗試是不是真的很漂亮，甚至看起來像上面的圖片...

這裏是我的嘗試：http://jsfiddle.net/xw6zL/2/ ...

任何想法？

Answer 1

我認爲這是相當接近：http://jsfiddle.net/xw6zL/4/

撥弄它:)

---

效果是由每個單元的上下邊框下方增加了兩個硬盒陰影實現。看看它的systax here。

Answer 2

下面是一些我們需要您的例子更深入一點的鏈接：
http://www.red-team-design.com/stylish-css3-progress-bars
http://lab.galengidman.com/progress-bars/
http://sevenspark.com/free-stuff/css3-progress-bars

我覺得這些都是相當不錯的不錯的CSS3吧。這些都有教程和源代碼來幫助。