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; }
.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; }
.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; }
.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 obenVerwenden Sie HTML+CSS, um das Dropdown-Menü zu implementierenDas 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!