带有箭头的CSS进度指示器

Question

我需要帮助，我正在尝试复制这种进度指示器，但我无法弄清楚。

我想要的是：

我拥有的：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”类-我想避免这种情况，因此我可以将项目标记为active。另外，我的示例中的箭头并不是最好的设置-在我想要的图像上，它最好设置箭头（开始时较粗）。

我需要您的帮助：

1。）创建更好的CSS，显然我不擅长CSS，因此不需要要求活动的类，也不必为背景设置正确的颜色并进行优化-每页可能有此列表的数百个]

2。）创建箭头以匹配我想要的设计上的箭头

3。）它必须是动态的，因为有时它会很小，有时会很大，它必须能够应付不同的字体大小（也许使用em或百分比-我只是用px来测试东西）

4。）如果-仅在可能的简单方式中-例如将其设为整个长600像素；当前的活动目录最长，其他活动目录具有固定大小，活动目录总是会填满其余部分。因此，如果第一个处于活动状态，则需要400像素，其余的则填充200像素（当我们激活第二个时），以动画使其他尺寸变小，第二个尺寸变大。我使用jquery，因此可以使用他的任何提示，但我更喜欢css动画（会有成千上万行javascript代码-因此，我尝试对ui使用尽可能少的javascript）

谢谢

Answer 1

您应该使用一个伪旋转元素并将其绘制在最左侧。 第一个不可见，因此不必担心最后一个li，将overflow上的ul设置为隐藏overflow ing部分：）。

DEMO和CSS

body {
  font-family: 'Segoe UI';
  font-size: 13px;
}

ul.progress li.active {
  background-color: #dc9305;
}

ul.progress li {
  background-color: #7e7e7e;
  position: relative;
  text-indent: 0.5em;
}

ul.progress li:after {
  content: '';
  position: absolute;
  right: 100%;
  margin-right: 0.4em;
  width: 1.2em;
  padding-top: 1.2em;
  ;
  border: solid white;
  z-index: 1;
  transform: rotate(45deg);
  border-bottom: 0;
  border-left: 0;
  box-shadow: 5px -5px 0 3px #7e7e7e
}

ul.progress li.active:after {
  box-shadow: 6px -6px 0 3px #dc9305;
}

ul.progress {
  list-style: none;
  margin:2px 0;
  padding: 0;
  overflow: hidden;
  min-width:max-content;
}

ul.progress li {
  float: left;
  line-height: 20px;
  height: 20px;
  min-width: 130px;
  position: relative;
  transition: min-width 0.5s;
}

ul.progress li a {
  padding: 0px 0px 0px 6px;
  color: #FFF;
  text-decoration: none;
}

ul.progress li:hover {
  min-width: 300px;
}

ul.progress li:before {
  content: '\2714'
}

ul.progress li.active:before,
ul.progress li.active~li:before {
  content: ''
}

<ul class="progress">
  <li class="active"><a href="">Qualify</a></li>
  <li><a href="">Develop</a></li>
  <li><a href="">Propose</a></li>
  <li><a href="">Close</a></li>
</ul>
<ul class="progress">
  <li><a href="">Qualify</a></li>
  <li class="active"><a href="">Develop</a></li>
  <li><a href="">Propose</a></li>
  <li><a href="">Close</a></li>
</ul>
<ul class="progress">
  <li><a href="">Qualify</a></li>
  <li><a href="">Develop</a></li>
  <li class="active"><a href="">Propose</a></li>
  <li><a href="">Close</a></li>
</ul>
<ul class="progress">
  <li><a href="">Qualify</a></li>
  <li><a href="">Develop</a></li>
  <li><a href="">Propose</a></li>
  <li class="active"><a href="">Close</a></li>
</ul>

---

[不要忘记添加供应商前缀或使用脚本来处理它。

---

在li上看到它们随transition一起增长，也通过CSS在li类前面的.active中添加了复选标记>

Answer 2

Check this out