The renderings are as follows
The html part only needs a ul list (the beginning and end of the progress bar can be modified according to your own needs)
css style part code
Step 1: Generate a rectangular effect
Step 2: Generate a triangle behind the rectangle according to: after
Step 3: Modify the color of the triangle behind
Step 4: Generate a triangle in front of the rectangle and do position color processing through: before
At this point, the renderings have been basically completed;
After that, it is necessary to judge the current color change based on the status (the last three styles in the figure below are to add active styles, the first style is to hide the triangle in front of the first element, and the triangle of the last element can also be modified according to needs. processing)
final renderings
