你如何创建一个箭头主题进度条导航？

Question

因此，进度条有五个基本步骤，每个页面上都会突出显示不同的步骤。在第一个图像中，步骤1被突出显示。请记住，每个箭头都应该是可扩展的，用CSS实现类似的最好方法是什么？

Answer 1

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