CSS3 - 进度条设计

Question

我正试图为我网站上的进度条提供一个很好的风格（他们都使用jQuery UI）。 我希望它看起来像这样:(有一个很好的斜角效果和下面一个很好的进度指示器）

我试着用CSS3玩一点这样的东西，但我找不到一个好方法去做，我试过的不是很漂亮，甚至看起来像上面的图片...... / p>

这是我的尝试：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吧。其中每个都有教程和源代码来帮助。