[CSS Demo] use pure CSS to create the Flow-Steps navigation and cssflow-steps

[CSS Demo] use pure CSS to create the Flow-Steps navigation and cssflow-steps

The low-Steps navigation effect is usually used to indicate the interactive page for performing the step. The effect is as follows:

• Step 1
• Step 2
• Step 3

 

Images are usually used to achieve Flow-Steps, but this method is not flexible enough. When the content changes greatly, you may need to re-cut the image, here we will introduce how to implement Flow-Steps with pure CSS:

Compatible version

This version is compatible with mainstream browsers (IE6, 7, 8... FF, chrome), but it also causes complicated HTML structure and uses the IE filter. The Demo is as follows:

<! DOCTYPE html> Two necessary instructions:
1. The triangle arrow effect is implemented by border.
2. Because the border-color: transparent is not supported in IE6, the solution is to set it to an uncommon color and then use the IE filter to make it transparent (comments in the Demo)
 
CSS3 version
When CSS3 is used, HTML code is much simpler, because pseudo elements are used to replace meaningless tags and also implement the hover effect. The disadvantage is that it is not compatible with IE6.
<! DOCTYPE html> 
 
Source: creating Flow-Steps navigation with pure CSS