Implement a process bar with arrows using CSS

This article describes the use of pure CSS with the arrow process progress bar, compatible to IE8, the need for friends below to learn together.

First, write a basic style.

. Cssnav li{      padding:0px 20px;       line-height:40px;      Background: #50abe4;      Display:inline-block;       Color: #fff;      position:relative;  }

Next use: After Pseudo-class to draw a triangle, navigate to the right, as follows:

. 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;  }

Then after the color modification, the basic prototype has been seen.

. 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;  }

Continue to use: before Pseudo-class to draw the left triangle. As follows:

. 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;  }

Then modify the color under before and copy multiple modules to see.

Finally, the beginning and the end of a slightly modified.

. 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;    }

Add the selected state and you are done.

. Cssnav li.active {      background-color: #ef72b6;  }  . Cssnav Li.active:after {      border-left-color: #ef72b6;  }