CSS快速入門-箭頭和圖標

 一、三步搞懂箭頭產生的原理

在前面的盒子模型一文中，我們已經知道了一個元素空間占位。為了弄明白箭頭的產生，我們可以三步走：

 #demo12 {
          border: 100px solid;
          border-color:green blue orange red;
          width:100px;
          height:100px;
        }

<div id="demo12"></div>

　　

第一步：設置一個div，然后給他設置樣式：邊框100px，上右下左顏色分別為綠、藍、橘、紅。然后設置div的高度和長度均為100。

效果圖如下：

 

第二步：我們可以看到中間一個正方形，就是我們設置的長和框：100px*100px。假如把width和height都設置成0的話，會有什么樣的情景呢？

content拿掉后，其實就是變成一個點了，然后就變成下圖了：

 

 

第三步：三角形是不是有了？而且還有四個，這時我們只需要取其中想要的任意一個方向的三角形即可。比如我們要取綠色的三角形。看好了，一句話就出來了：

將上面的代碼修改一行代碼：

border-color:green transparent transparent transparent;

同理，如果你要取藍色的、橘色的、紅色的，隨便可以取到。

除了獲取上面三角形以外，我們還可以獲取上面每個三角形的一般，也就是一個小的三角形（left或right）：

這時，我們再加一行代碼即可獲取：

#demo12 {
          border: 100px solid;
          border-color:green transparent transparent transparent;
          border-left:transparent;
          width:0px;
          height:0px;
        }

　　

加上border-left:transparent;后，我們可以獲取right的部分，結果如下：

同理，要獲取left部分，可以設置border-right:transparent;

 

二、箭頭在實際中的使用和實現

在很多網站上，我們隨處可以見到箭頭。

比如淘寶網：

 

實例1：

這個比較簡單，就是一個向右的箭頭，我們將top、right、bottom均設置為透明色即可獲得。

 #demo12 {
          border: 10px solid;
          border-color:transparent transparent transparent orange;
          width:0px;
          height:0px;
        }

　　

實例2：

這個也非常簡單，我們從上面的四個三角形中，把bottom的三角形去掉即可，也就是把bottom的三角形設置為透明色：

#demo12 {
          border: 50px solid;
          border-color:orange orange transparent orange;
          width:0px;
          height:0px;
        }

　　

 實例3：

這個比較明顯，就是兩個向右的三角形疊加而成。

思路如下：

設置2個div，其中一個相對定位，另外一個絕對定位，這樣就可以控制兩個div的位置了。

然后獲取2個div的右向箭頭即可。talk is cheap，show me the code！

.demo{
              border: 50px solid;
              border-color:transparent transparent transparent orange;
              width:0px;
              height:0px;

        }
        .demo12 {
          position:relative;
          float:left;
        }
        .demo13 {
          position:absoulte;
          margin-top:-52px;
        }

<div class="demo demo12">
        <div class="demo demo13"></div>
    </div>

　　

效果圖如下：

 

實例4：

這個例子的實現通過一個正方形+一個三角形就可以了。

#demo1 {                                       #設置一個長方形，且為相對定位，為后續附加在它身上的三角形准備
              width: 100px;
              height: 40px;
              background-color: orange;
              position: relative;
              border: 4px solid #333;
              left:30px;
              line-height:40px;
            }
                                             #設置整體樣式
            #demo1:after, #demo1:before {
              border: solid transparent;
              content: ' ';
              height: 0;
              right: 100%;
              position: absolute;
              width: 0;
            }
                                             #在長方形的右邊形成一個橘色的三角形（這里主要用於覆蓋黑色的三角形，起到填充的作用）
            #demo1:after {
              border-width: 9px;
              border-right-color: orange;
              top: 15px;
            }
　　　　　　　　　　　　　　　　　　　　         #在長方形的右邊形成一個黑色的三角形（這里主要要用他的黑色邊框）　　　　　　　　
            #demo1:before {
              border-width: 14px;
              border-right-color: #333;
              top: 10px;
            }

<div id="demo1">我是箭頭測試</div>

　　

效果圖如下：