一種麪包屑導航

要實現的效果

效果圖：

分析：

這裏有兩個關鍵點

• 向右的三角形邊框
• 鼠標懸停時背景圖形 這裏介紹一種經過CSS,不借助背景圖片實現上面效果的方法。

邊框的組成

給一個div四個方向的邊框分別設置不一樣的顏色：

• 當div寬度和高度都不爲0時，能夠看到四個邊框均爲梯形

• 當div寬度爲0時，能夠看到上下邊框變成了三角形

• 當div寬度和高度均爲0時，能夠看到四個邊框都變成了三角形

用邊框畫三角形

在div寬度和高度均爲0時，把上、右、下，方向的邊框顏色均設爲透明，就能夠獲得一個向右的三角形。 樣式表以下：

.sanjiao{
      margin: 10px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid red;
    }

由上能夠看出，三角形底邊的長度即爲上、下邊框寬度的和，三角形底邊上的高度即爲左邊框的寬度。

畫1像素的右三角邊框線

思路：以下圖，用兩個底邊重和的三角形疊加，下面三角形的顏色即爲邊框的顏色，經過控制兩個三角形的大小能夠控制邊框的寬度。

樣式表

.div5{
      width: 100px;
      height: 40px;
      line-height: 40px;
      position: relative;
      border: 1px solid red;
      padding-left: 20px;
    }
    .div5::after{
      content: '';
      position: absolute;
      top: -1px;
      right: -1px;
      width: 0;
      height: 0;
      border-top: 21px solid white;
      border-right: 21px solid white;
      border-bottom: 21px solid white;
      border-left: 21px solid red;
      z-index: 1;
    }
    .div5::before{
      content: '';
      position: absolute;
      top: 0;
      right: 1px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid white;
      z-index: 2;
    }
    .div5:hover{
      background-color: red;
      color: white;
    }
    .div5:hover::before{
      border-left: 20px solid red;
    }

Html

<div class="div5">測試</div>

效果圖：

這裏經過兩個疊放的三角形僞元素::after和::before來構造的。

完整的麪包屑

樣式表

.brandcrumb{
      margin: 10px;
      background-color: #eee;
    }
    .brandcrumb ul{
      padding: 0;
      margin: 0;
      list-style: none;
      background-color: #F8F8F8;
      border: 1px solid #DEDEDE;
      border-radius: 3px;
      font-size: 0;
    }
    .brandcrumb ul li{
      height: 40px;
      line-height: 40px;
      position: relative;
      padding-left:20px;
      display: inline-block;
    }
    /*底層三角形*/
    .brandcrumb ul li::after{
      content: '';
      position: absolute;
      top: -1px;
      right: -42px;
      width: 0;
      height: 0;
      border-top: 21px solid transparent;
      border-right: 21px solid transparent;
      border-bottom: 21px solid transparent;
      border-left: 21px solid #DEDEDE;
      z-index: 1;
    }
    /*表層三角形*/
    .brandcrumb ul li::before{
      content: '';
      position: absolute;
      top: 0;
      right: -40px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid #F8F8F8;
      z-index: 2;
    }
    .brandcrumb ul li:hover{
      background-color: #9AB26B;
    }
    .brandcrumb ul li:hover::before{
      border-left: 20px solid #9AB26B;
    }
    .brandcrumb ul li:hover i{
      background-color: #F8F8F8;
      color: #9AB26B;
    }
    .brandcrumb ul li:hover a{
      background-color: #9AB26B;
      color: #F8F8F8;
    }
    .brandcrumb ul li i{
      background-color: #9AB26B;
      color: white;
      width: 22px;
      height: 22px;
      line-height: 22px;
      display: inline-block;
      text-align: center;
      font-style: normal;
      border-radius: 22px;
      font-size: 16px;
    }
    .brandcrumb ul li i:not(first-child){
      margin-left: 10px;
    }
    .brandcrumb ul li a{
      text-decoration: none;
      color: #7E8C8D;
      margin-left: 15px;
      font-size: 16px;
    }

Html

<div class="brandcrumb">
      <ul>
        <li><i>1</i><a href="">My Cart</a></li>
        <li><i>2</i><a href="">Enter Details</a></li>
        <li><i>3</i><a href="">Checkout</a></li>
        <li><i>4</i><a href="">Thank You</a></li>
      </ul>
    </div>

效果圖：

幾點說明：

1. li的實際大小
2. 三角形邊框實際是在li的外邊，緊鄰li的右外邊界
3. :hover時，修改li的背景顏色，因爲上一個li的三角形邊框的覆蓋，li的左邊造成了一塊向內凹三角形區域
4. :hover時，li的背景區域
5. :hover時，修改li的頂層三角形邊框的顏色