Heim > Web-Frontend > CSS-Tutorial > Verwenden Sie CSS, um einen Prozessfortschrittsbalken mit Pfeilen zu implementieren

Verwenden Sie CSS, um einen Prozessfortschrittsbalken mit Pfeilen zu implementieren

高洛峰
Freigeben: 2017-02-28 13:43:34
Original
2253 Leute haben es durchsucht

In diesem Artikel wird der Fortschrittsbalken mit Pfeilen mithilfe von reinem CSS vorgestellt, das mit IE8 kompatibel ist. Freunde, die es benötigen, können es gemeinsam lernen.

Schreiben Sie zunächst einen Grundstil.

Verwenden Sie CSS, um einen Prozessfortschrittsbalken mit Pfeilen zu implementieren

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

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

Verwenden Sie CSS, um einen Prozessfortschrittsbalken mit Pfeilen zu implementieren

.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

Ändern Sie dann die Farbe von After, und der grundlegende Prototyp ist sichtbar.

Verwenden Sie CSS, um einen Prozessfortschrittsbalken mit Pfeilen zu implementieren

.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

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

Verwenden Sie CSS, um einen Prozessfortschrittsbalken mit Pfeilen zu implementieren

.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

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

Verwenden Sie CSS, um einen Prozessfortschrittsbalken mit Pfeilen zu implementieren

Zuletzt modifizieren Sie Anfang und Ende leicht.

Verwenden Sie CSS, um einen Prozessfortschrittsbalken mit Pfeilen zu implementieren

.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

Den ausgewählten Status hinzufügen und fertig.

Verwenden Sie CSS, um einen Prozessfortschrittsbalken mit Pfeilen zu implementieren

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


Weitere Implementierung des Prozessfortschrittsbalkens mit Pfeilen mithilfe von CSS für Verwandte Artikel, achten Sie bitte auf die chinesische PHP-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