CSS2.0 to achieve bread crumbs

Crumbs like that we used to do this with background pictures, but until about 2 weeks ago on Sina Weibo to see the use of css3.0 to achieve such crumbs but the current situation ie6-8 does not support css3.0 only standard browser (such as Firefox Google support). Because there is a previous summary of the "CSS implementation bubble box effect" article in which there is about how to achieve small triangle of the sample so feel with that small triangle can just simulate this piece of work, so also try to do a. Let's take a look at what kind of effect bread crumbs might be! The following figure:

As shown above:

Ideas:

1. The page has 3 Li li tags nested with 2 tags to simulate 2 small triangles the first one is the white background the second block is the small triangle that overlaps the gray background.

The HTML code can be written as follows:

 

  

  

   

   
gggg
   

   
gggg
   

   
gggg
   

  
  

 

The following example of the effect of our case first put us or to review the previous written "CSS implementation bubble box effect" in how to achieve a small triangle bar!

For example, the page has the following HTML code:

Now I want to implement a small triangle with CSS What do we do now? Take a step at a time to split.

1. First we look at the CSS border properties, when we set a div border-color to a different color, you can see the four edges are rectangular. The following CSS code

. demo {width:50px;height:50px;border-width:50px;border-style:solid;border-color: #CCC #00F #933 #0C9;}

As shown in the following illustration:

2. If we continue to set the width and height of the div to 0 then the four edges will be triangular.

As shown in the following illustration:

But under the IE6 is the triangle around is the rectangle box: as follows:

The experiment found that when the Div font-size and Line-height are set to 0, the four sides of the Div can form the perfect triangle under the IE6: code as follows

demo{width:0 height:0; border-width:50px border-style:solid; Border-color: #CCC #00F #933 #0C9; line-height:0; font-size:0;}

3. It's clear that we just need a triangle, so we just have to set the other three-side colors to be transparent or set to be the same as the background color to make a triangle out of the other three-side color set to transparent, that is, the value of color is transparent, If the other three-side color is the same as the page background, although the visual can only see a triangle, but once the background color change, the other three-side color will change. The following code:

demo{width:0 height:0; border-width:50px border-style:solid; Border-color: #CCC Transparent transparent transparent ; line-height:0;font-size:0;}

But there's a problem under the IE6. IE6 does not support transparent transparent as follows:

But through the experiment found that the Border-style set to dashed, IE6 under the other three sides can be transparent! As follows:

Now the small triangle has been made!

Now, what do you do with the little triangle of bread crumbs?

1. First we look at the HTML structure as follows:

 


  
 
   
gggggggg
 
   
gggg& lt;/em>
    
  
   
 

So normally we add the following CSS style

*{margin:0; padding:0;}
Ul,li{list-style:none;}
. box{position:relative;margin:100px auto;background: #ccc; Width:600px;height:32px;line-height:32px;overflow: Hidden;}
. box Li{float:left;width:200px;text-align:center;position:relative;z-index:2;

You can achieve the following effects:

. Our problem now is that I want to add a small triangular background to the right of each column. White overlay to gray background so we can write a CSS style on the EM tag to make a small triangle like how it is made, so there is no more to say. The code is as follows:

. box Li em{width:0;height:0;border-color:transparent transparent transparent #fff; border-style:dashed dashed dashed solid;border-width:24px 0 24px 24px;position:absolute;right:-24px;top:-8px;line-height:0;font-size:0;}

Add CSS code to the following effect diagram:

It's normal for me to add a small triangle to the right of each column and use the Overflow:hidden so the last small triangle is gone, but the last one in ie6,7 has a small triangle so I'm in the outermost container

Box{position:relative}; Added a relative positioning so currently compatible ie6+ Firefox Google and other visitors.

3. It has now been made as shown, and we are not finished with what we want, so we need to do a little triangle on the Li tab. The background is gray and the CSS code is as follows:

. box Li i{width:0;height:0;border-color:transparent transparent transparent #ccc; border-style:dashed dashed dashed solid;border-width:16px 0 16px 16px;position:absolute;right:-16px;top:0;line-height:0;font-size:0;}

4. However, due to the currently selected state, the current style is added as follows:

. Box Li.current{background: #933; z-index:1;}
. box li.current i{border-color:transparent transparent transparent #933;}

Now it's all done. The effect is as follows:

Now combine all the code:

The HTML code is as follows:

  


   
 
    
gggggggg
 
    
gggg& lt;/em>
     
   
    
  

The CSS code is as follows:

*{margin:0; padding:0;}
Ul,li{list-style:none}
. box{position:relative;margin:100px auto;background: #ccc; Width:600px;height:32px;line-height:32px;overflow: Hidden}
. box Li{float:left;width:200px;text-align:center;position:relative;z-index:2;
Box Li Em{width:0;height:0;border-color:transparent transparent transparent #fff; border-style:dashed dashed dashed solid;border-width:24px 0 24px 24px;position:absolute;right:-24px;top:-8px;line-height:0;font-size:0;
Box Li I{width:0;height:0;border-color:transparent transparent transparent #ccc; border-style:dashed dashed dashed solid;border-width:16px 0 16px 16px;position:absolute;right:-16px;top:0;line-height:0;font-size:0;
Box li.current{background: #933; z-index:1;}
. Box li.current i{border-color:transparent transparent transparent #933;}

The page has been completed if there are deficiencies please leave a message! Thank you!!