這次帶給大家CSS實作帶箭頭流程可見進度條，CSS實作帶箭頭流程可見進度條的注意事項有哪些，下面就是實戰案例，一起來看一下。
先寫出一個基本的樣式。
.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的顏色修改下，基本的雛形已經看到了。
.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;
}繼續使用 :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的顏色，並複製多個模組看看。
最後把開頭和結尾的稍微修飾一下。
.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;
}相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是CSS實作帶箭頭流程可見進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章！
