css - CSS3 - 进度条设计

Question

我试图给我网站上的进度条一个漂亮的样式（它们都使用 jQuery UI）。我希望它看起来像这样：（下面有一个很好的斜角效果和一个很好的进度指示器）

我试着用 CSS3 玩一点来得到这样的东西，但我找不到一个好的方法，而且我尝试的不是很漂亮，甚至看起来不像上面的图片......

这是我的尝试：http: //jsfiddle.net/xw6zL/2/ ...

任何想法 ？

Answer 1

我认为这很接近：http: //jsfiddle.net/xw6zL/4/

摆弄它:)

---

该效果是通过在每个元素的上下边框下方添加两个硬盒阴影来实现的。在这里查看它的系统税。

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 条。其中每一个都有教程和源代码来提供帮助。