CSS は矢印プロセスを備えた表示可能なプログレスバーを実装します

今回は、プロセスの進行状況バーを矢印で表示するための 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 の色を変更すると、基本的なプロトタイプが表示されます。

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSSでマウスが上に移動したときにアイコンを回転させる

HTML+CSSを使用してドロップダウンメニューを実装する

以上がCSS は矢印プロセスを備えた表示可能なプログレスバーを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。