CSS implementation with arrow process visible progress bar

This time to bring you a CSS implementation with the arrow process visible progress bar, CSS implementation with the arrow process visible progress bar notes are what, the following is the actual case, together to see.

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

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS to make the mouse move up icon rotation

Implementing a drop-down menu with HTML+CSS