【发布时间】：2014-04-12 16:12:57
【问题描述】：
我需要帮助，我正在尝试复制这种进度指示器，但我无法弄清楚。
我想要什么：
我有什么：http://jsfiddle.net/AQWdM/
body {
font-family: 'Segoe UI';
font-size: 13px;
}
ul.progress li.active {
background-color: #dc9305;
}
ul.progress li {
background-color: #7e7e7e;
}
ul.progress {
list-style: none;
margin: 0;
padding: 0;
}
ul.progress li {
float: left;
line-height: 20px;
height: 20px;
min-width: 130px;
position: relative;
}
ul.progress li:after {
content: '';
position: absolute;
width: 0;
height: 0;
right: 4px;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #7e7e7e;
}
ul.progress li:before {
content: '';
position: absolute;
width: 0;
height: 0;
right: 0px;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #fff;
}
ul.progress li.beforeactive:before {
background-color: #dc9305;
}
ul.progress li.active:before {
background-color: #7e7e7e;
}
ul.progress li.active:after {
border-color: transparent transparent transparent #dc9305;
}
ul.progress li:last-child:after,
ul.progress li:last-child:before {
border: 0;
}
ul.progress li a {
padding: 0px 0px 0px 6px;
color: #FFF;
text-decoration: none;
}<ul class="progress">
<li><a href="">Qualify</a></li>
<li class="beforeactive"><a href="">Develop</a></li>
<li class="active"><a href="">Propose</a></li>
<li><a href="">Close</a></li>
</ul>首先，我的示例有“beforeactive”类——我想避免这种情况，所以我可以将项目标记为活动。此外，我的示例中的箭头不是最好的设置 - 在我想要的图像上，它有更好的设置箭头（开始时更粗）。
我需要你的帮助：
1.) 创建更好的 css，显然我不擅长 css，所以不需要 beforeactive 类，也可以适当地为背景着色，并进行优化 - 每页可以有数百个这样的列表
2.) 创建箭头以匹配我想要的设计
3.) 它需要是动态的，因为有时它会很小，有时会很大，它需要能够处理不同的字体大小（可能使用 em 或百分比 - 我使用 px 只是为了测试东西)
4.) IF - 并且仅当是可能的简单方法 - 使其例如整个长 600 像素；当前活动的最长，其他的有固定的大小，活动的总是填满其余的。因此，如果第一个是活动的，它需要 400px，其余填充 200px，当我们激活第二个时，动画使其他尺寸变小，第二个尺寸变大。我用jquery，所以用他的anymations没问题，但我更喜欢css动画（会有几千行javascript代码——所以我尽量少用javascript做ui）
谢谢
【问题讨论】：
-
你自己做了那个 Css 部分我的意思是 jsfiddle 示例中的那个
-
是的，我写的。为什么？
-
如果是，你的 Css 还不错
-
我肯定不好 - 否则我不需要帮助 :) （我是程序员、asp.net、sql 等......不是设计师）
-
这就是基本的 CSS。 @user3127499