矢印テーマ進行状況バーのナビゲーションを作成するにはどうすればよいですか？

Question

進捗バーには5つの基本ステップがあり、各ページに異なるステップが強調表示されます。最初の画像では、ステップ1が強調表示されます。それぞれの矢印は伸縮可能でなければならないことを念頭に置いてCSSを使ってこのようなことを達成する最良の方法は何ですか？

Answer 1

形状を作成し、ちょうどあなたがアクティブとして/あなたが

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