CSS breadcrumb navigation bar

Before doing so, look at the renderings.

First, write the HTML code.

  <Div id = "crumbs">
             <Li> <a rel="nofollow" target="_blank" href="#"> Home </a> </ li>
         </ Ul>
     </ Div>

Here we take a li tag as an example.

  #crumbs ul {
         List-style: none;

Change the default style of the list.

  #crumbs ul li a {
         Float: left;
         Margin-right: 30px;
         Display: inline-block;
         Height: 30px;
         Padding: 10px 20px 0 20px;
         Text-align: center;
         Background-color: # 3498db;
         Color: #fff;
         Text-decoration: none; 
         Font-size: 20px;
  1. Set the position to relative, because the following we want to use before, after drawing effect.
  2. Set the height to 30px, padding-top to 10px, so the height of the element here is 40px.

The effect of this time is as follows.

  #crumbs ul li a: after {
         Content: "";
         Border-left: 20px solid green;
         Border-top: 20px solid red;
         Border-bottom: 20px solid red;
         Position: absolute;
         Right: -20px;
         Top: 0;

Now the effect is like this.

In fact, I have not yet understand the principle of which, why the designated upper and lower left frame there will be a triangle in the middle? Hope to understand the principles of this article can explain.

The above color settings are only for observation, we can set the top and bottom border to transparent, the left border is set to the same as the a element.

  Border-left: 20px solid # 3498db;
     Border-top: 20px solid transparent;
     Border-bottom: 20px solid transparent;

This time the effect is as follows.

Visible, the effect has come out, using the same principle, we draw the effect on the left.

  #crumbs ul li a: before {
         Content: "";
         Border-top: 20px solid # 3498db;
         Border-bottom: 20px solid # 3498db; 
         Border-left: 20px solid transparent;
         Position: absolute;
         Top: 0;
         Left: -20px;

The results are as follows

Well, now that our effects are complete, if we want to achieve the kind of effect we show at the beginning, we need to write a few more labels, and the first element and the last element and the middle element effect Or not the same, here we write this code.

  #crumbs ul li: first-child a {
             Border-top-left-radius: 10px;
             Border-bottom-left-radius: 10px;

         #crumbs ul li: first-child a: before {
             Display: none;

         #crumbs ul li: last-child a {
             Border-top-right-radius: 10px;
             Border-bottom-right-radius: 10px;

         #crumbs ul li: last-child a: after {
             Display: none;

The above code is not difficult to understand, I will not explain, this time the effect is as follows.

For aesthetic, it is best to set a background hover effect for the mouseover.

  #crumbs ul li a: hover {
             Background-color: # fa5ba5;

         #crumbs ul li a: hover: after {
             Border-left- color: # fa5ba5;

         #crumbs ul li a: hover: before {
             Border-top-color: # fa5ba5;
             Border-bottom-color: # fa5ba5;

This time we click on the label, there will be a white border, very ugly, you can add a element in the style of the following line of code.

  Outline: none;

Leave a Reply

Your email address will not be published. Required fields are marked *