你如何创建一个箭头主题进度条导航?
问题描述:
因此,进度条有五个基本步骤,每个页面上都会突出显示不同的步骤。在第一个图像中,步骤1被突出显示。请记住,每个箭头都应该是可扩展的,用CSS实现类似的最好方法是什么?你如何创建一个箭头主题进度条导航?
答
使用clip-path: polygon
CSS属性创建的形状,然后只需添加类.chevron_active
您要显示为有效的那些/完成
.chevron {
background: #ccc;
border:1px solid #fff;
height: 15px;
width: 75px;
display:inline-block;
margin-left:-20px;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
.chevron_active {
background:#666;
}
<ul>
<li class="chevron chevron_active"></li>
<li class="chevron chevron_active"></li>
<li class="chevron "></li>
<li class="chevron "></li>
<li class="chevron "></li>
</ul>
你可以将箭头作为矢量并使用javascript和css修改它们的颜色。在Google或这里搜索载体:) – mnemosdev
您能否尝试更具体地了解您需要什么?有很多种方法来创建这样的东西。你有什么尝试?向我们展示您的代码。 –