Question

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

我想要的是什么：http://i.imgur.com/BngBAN0.jpg（不能直接放置图片，缺少信誉点）

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

首先，我的例子是＆＃34; beforeactive＆＃34; class - 我想避免这种情况，所以我可以将item标记为active。此外，我的示例中的箭头不是最好的设置 - 在图像上我想要的是什么，它有更好的设置箭头（开始时更厚）。

我需要你的帮助：

1。）创建更好的CSS，显然我不擅长CSS，所以不要求在课前，也要正确地为背景着色，并进行优化 - 每页可以有这个列表的内容

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

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

4。）IF - 并且只有在可能的简单方式下 - 例如整个长600px;当前活动的一个是最长的，另一个是固定的大小，活动的一个总是填满其余部分。因此，如果第一个是活动的，它需要400px，休息填充200px，当我们激活第二个，动画制作其他尺寸，第二个尺寸。我使用jquery，所以可以使用他的anymations，但我更喜欢css动画（会有成千上万行的javascript代码 - 所以我尝试尽可能少地使用ji）

谢谢

Answer 1

您应该使用一个伪旋转元素并在最左侧绘制它。 第一个将在视线之外，因此无需担心上次li，在overflow设置ul隐藏overflow部分:)。

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: 0;
  padding: 0;
  overflow:hidden;
}

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:''
}

不要忘记添加vendor-prefix或使用脚本来处理它。

超过li，看到它们与transition一起增长，检查标记也通过CSS添加到li提前.active类

Answer 2

Check this out

请检查一下，看看这是你在找什么

<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

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;

}

输出

O/p

带箭头的css进度指示器

2 个答案:

输出