CSS を使用して矢印付きのプロセス進行状況バーを実装する

この記事では、IE8 と互換性のある、純粋な CSS を使用した矢印付きのプロセス進行状況バーを紹介します。必要な友達は一緒に学ぶことができます。

まず基本的なスタイルを書きます。

.cssNav li{  
    padding: 0px 20px;   
    line-height: 40px;  
    background: #50abe4;  
    display: inline-block;   
    color: #fff;  
    position: relative;  
}

次に、:after 疑似クラスを使用して三角形を描画し、次のように右側に配置します:

.cssNav li:after{  
    content: '';  
    display: block;  
    border-top: 20px solid red;  
    border-bottom: 20px solid red;  
    border-left: 20px solid blue;  
    position: absolute;   
    rightright: -20px;   
    top: 0;  
}

次に、after の色を変更します。基本的なプロトタイプは Saw it です。

.cssNav li:after{  
    content: '';  
    display: block;  
    border-top: 20px solid transparent;  
    border-bottom: 20px solid transparent;  
    border-left: 20px solid #50abe4;  
    position: absolute;   
    rightright: -20px;   
    top: 0;  
    z-index: 10;  
}

引き続き :before 疑似クラスを使用して、左側に三角形を描画します。以下のように:

.cssNav li:before{  
    content: '';  
    display: block;  
    border-top: 20px solid red;  
    border-bottom: 20px solid red;  
    border-left: 20px solid blue;  
    position: absolute;   
    left: 0px;   
    top: 0;  
}

次に、前の色を変更し、複数のモジュールをコピーして確認します。

最後に、最初と最後を少し修正します。

.cssNav li:first-child{    
    border-radius: 4px 0 0 4px;    
    padding-left: 25px;  
}    
.cssNav li:last-child,.cssNavEnd{    
    border-radius: 0px 4px 4px 0px;    
    padding-right: 25px;  
}    
.cssNav li:first-child:before{    
    display: none;    
}    
.cssNav li:last-child:after,.cssNavEnd:after{    
    display: none;    
}

選択したステータスを追加して完了です。

.cssNav li.active {  
    background-color: #ef72b6;  
}  
.cssNav li.active:after {  
    border-left-color: #ef72b6;  
}

CSS を使用して矢印付きのプロセス進行状況バーを実装することに関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。