Html 带有箭头的css进度指示器

我需要帮助，我正试图复制这种进度指标，但我想不出来

我想要的是：

我所拥有的：

正文{
字体系列：“SegoeUI”；
字体大小：13px；
}
ul.progress li.active{
背景色：#dc9305；
}
进步李{
背景色：#7e7e7e；
}
进步{
列表样式：无；
保证金：0；
填充：0；
}
进步李{
浮动：左；
线高：20px；
高度：20px；
最小宽度：130px；
位置：相对位置；
}
李：之后{
内容：''；
位置：绝对位置；
宽度：0；
身高：0；
右：4px；
边框样式：实心；
边框宽度：10px 0 10px 10px；
边框颜色：透明#7e7e7e；
}
李：以前{
内容：''；
位置：绝对位置；
宽度：0；
身高：0；
右：0px；
边框样式：实心；
边框宽度：10px 0 10px 10px；
边框颜色：透明#fff；
}
ul.progress li.before主动：before{
背景色：#dc9305；
}
ul.progress li.主动：在{
背景色：#7e7e7e；
}
ul.progress li.活动：之后{
边框颜色：透明#dc9305；
}
李：最后一个孩子：在，
李：最后一个孩子：之前{
边界：0；
}
ul.lia{
填充：0px 0px 0px 6px；
颜色：#FFF；
文字装饰：无；
}

您应该使用一个伪旋转元素，并在最左侧绘制它。第一个将看不见，因此无需担心最后一个

li

，在

ul

上设置

overflow

以隐藏

溢出部分：）

和CSS


正文{
字体系列：“SegoeUI”；
字体大小：13px；
}
ul.progress li.active{
背景色：#dc9305；
}
进步李{
背景色：#7e7e7e；
位置：相对位置；
文本缩进：0.5em；
}
李：之后{
内容：''；
位置：绝对位置；
右：100%；
右边距：0.4em；
宽度：1.2米；
垫面：1.2米；
;
边框：纯白；
z指数：1；
变换：旋转（45度）；
边界底部：0；
左边框：0；
盒影：5px-5px 0 3px#7e7e7e
}
ul.progress li.活动：之后{
盒影：6px-6px 0 3px#dc9305；
}
进步{
列表样式：无；
边际：2px0；
填充：0；
溢出：隐藏；
最小宽度：最大含量；
}
进步李{
浮动：左；
线高：20px；
高度：20px；
最小宽度：130px；
位置：相对位置；
过渡：最小宽度0.5s；
}
ul.lia{
填充：0px 0px 0px 6px；
颜色：#FFF；
文字装饰：无；
}
李：悬停{
最小宽度：300px；
}
李：以前{
内容：'\2714'
}
ul.progress li.主动：在，
ul.progress li.active~li:之前{
内容：“”
}
























请检查一下，看看这是你要找的吗

<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>

输出
Css部分是你自己做的吗我是指JSFIDLE示例中的那部分是的，我写的。为什么？如果是的，你在CssI方面不差，我肯定不好——否则我就不需要帮助：）（我是程序员、asp.net、sql等等……不是设计师）这是一种基本的CSS@User3127499哇，谢谢，这太棒了，按照我想要的方式工作。我花了2个小时编写了我的示例，您只花了几分钟就正确地完成了：）@CodeMonkey刚刚添加了复选标记，并在演示中启用了前缀free，但是，您知道我是一个非常糟糕的开发者；）但非常擅长css:）再次感谢你们，这是完美的。谢谢你们，我已经接受了GCyrillus的回答-因为他也做动画-但你们完全按照我的要求做了（除了动画部分）-所以我也会将你的答案标记为正确答案-看起来每个人都可以这样做-除了我：）嘿，我只是幸运而已嘿，你只能接受一个答案，但可以投票多个答案我会投票，一旦我有足够的声誉（我是新来的），谢谢你
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.progress li:hover {

  min-width:300px;

}