手把手教你用CSS實現(xiàn)帶箭頭的流程進(jìn)度條
發(fā)布時間：2017-01-22 17:29:22 作者：佚名 
我要評論
我要評論這篇文章主要給大家介紹了利用CSS實現(xiàn)帶箭頭的流程進(jìn)度條大方法，文中給出了詳細(xì)的示例代碼，對大家具有一定的參考價值，有需要的朋友們一起來看看吧。
本文介紹的是利用純CSS的帶箭頭流程進(jìn)度條，兼容到IE8，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)。
首先寫出一個基本的樣式。
.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的顏色修改下，基本的雛形已經(jīng)看到了。
.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;
}
繼續(xù)使用 :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;
}
然后修改下before的顏色，并復(fù)制多個模塊看看。
最后把開頭和結(jié)尾的稍微修飾一下。
.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;
}
加上選中狀態(tài)，大功告成。
.cssNav li.active {
background-color: #ef72b6;
}
.cssNav li.active:after {
border-left-color: #ef72b6;
}
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
css 實現(xiàn)圓形漸變進(jìn)度條效果的示例代碼
這篇文章主要介紹了css 實現(xiàn)圓形漸變進(jìn)度條效果的示例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-24
利用css3實現(xiàn)進(jìn)度條效果及動態(tài)添加百分比
這篇文章主要介紹了利用css3實現(xiàn)進(jìn)度條效果及動態(tài)添加百分比，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2020-06-01css 橫向進(jìn)度條和豎向進(jìn)度條實現(xiàn)代碼
這篇文章主要介紹了css 橫向進(jìn)度條和豎向進(jìn)度條實現(xiàn)代碼,有時候看一些不錯的滾動條效果不錯，這里給大家分享一下如果用css實現(xiàn)2020-04-14
使用CSS3實現(xiàn)環(huán)形進(jìn)度條效果
這篇文章主要介紹了使用CSS3實現(xiàn)環(huán)形進(jìn)度條效果,需要的朋友可以參考下2018-06-01
css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼
這篇文章主要介紹了css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼，介紹了進(jìn)度條里面的文字需要根據(jù)進(jìn)度的長度而變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一2018-01-09CSS實現(xiàn)進(jìn)度條和訂單進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了CSS進(jìn)度條和訂單進(jìn)度條的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-12- 純css做漂亮好看的進(jìn)度條，看了絕對不后悔。2010-05-31
- [html] <style> #graphbox{ border:1px solid #e7e7e7; padding:10px; width:250px; background-color:#f8f8f8; margin:5px 0; } #graphbox h2{ color:#662009-03-30
僅僅使用 HTML/CSS 實現(xiàn)各類進(jìn)度條的方式匯總
這篇文章主要介紹了僅僅使用 HTML/CSS 實現(xiàn)各類進(jìn)度條的方式匯總,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-08
