CSS implementiert einen sichtbaren Fortschrittsbalken mit Pfeilprozess

Dieses Mal bringe ich Ihnen das CSS, um den sichtbaren Fortschrittsbalken des Prozesses mit Pfeilen zu erkennen Ein praktischer Fall, werfen wir einen Blick darauf. Schreiben Sie zunächst einen Grundstil.

Als nächstes verwenden Sie die Pseudoklasse :after, um ein Dreieck zu zeichnen und es wie folgt rechts zu positionieren:

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

Ändern Sie anschließend die Farbe, und schon ist der grundlegende Prototyp sichtbar.

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

Verwenden Sie weiterhin die Pseudoklasse :before, um das Dreieck auf der linken Seite zu zeichnen. Wie folgt:

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

Ändern Sie dann die Farbe von zuvor und kopieren Sie mehrere Module, um einen Blick darauf zu werfen.

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

Zuletzt modifizieren Sie Anfang und Ende leicht.

Ausgewählten Status hinzufügen und fertig.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

CSS zum Drehen des Maussymbols nach oben

Verwenden Sie HTML+CSS, um das Dropdown-Menü zu implementieren

Das obige ist der detaillierte Inhalt vonCSS implementiert einen sichtbaren Fortschrittsbalken mit Pfeilprozess. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!