Heim > Web-Frontend > CSS-Tutorial > CSS implementiert einen sichtbaren Fortschrittsbalken mit Pfeilprozess

CSS implementiert einen sichtbaren Fortschrittsbalken mit Pfeilprozess

php中世界最好的语言
Freigeben: 2018-03-22 09:37:28
Original
4290 Leute haben es durchsucht

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;  
}
Nach dem Login kopieren

Ä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;  
}
Nach dem Login kopieren

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;  
}
Nach dem Login kopieren

Ä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;  
}
Nach dem Login kopieren

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;    
}
Nach dem Login kopieren

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage