使用css實現全兼容的三角形

在當前流行的的網站上，咱們常常會看到一些小三角形的下拉提示（微博頂部的下拉菜單），簡單的方式能夠使用一張圖片代替，可是隨着前端技術的發展，以及開發者對於前端性能的「吹毛求疵」，愈來愈多的前端開發者開始「返璞歸真」，在能不使用圖片的場景中減小圖片使用，css圖標相對於圖片還有個優點是咱們能夠方便的定製圖標的大小以及顏色。

css實現三角形圖標已不是什麼新鮮技術，以前也有不少相關的技術文章，這篇文章主要是分析下在實際場景中使用時遇到的問題以及如何迴避這些問題。
基本原理大同小異，這裏主要介紹利用css border（固然還能夠使用css3的旋轉技術實現，因爲兼容性問題這裏不涉及了）。

css border實現

一個div或者元素的border並非咱們直觀意義上的一條有高度的線，而是一個等高梯形或者三角形（寬高爲0時），能夠看一下效果：
div定義：

<div class="arrow1"></div>

css:

.arrow1{
    width: 0px;
    height:0px;
    border-width: 30px;
    border-style: solid;
    border-color: #007998 #47A447 #3C6AB9 #D2322D;
}

最終效果：

能夠看到每個方向的border都是一個三角形，那麼咱們只需把對應方向剩餘其餘方向的border設置爲透明或者隱藏掉就能夠獲得任何方向的一個三角形了。若是咱們想獲得一個下拉圖標，咱們能夠將border的左右和下邊框改成透明，css改動以下：

.arrow1{
    width: 0px;
    height:0px;
    border-width: 30px;
    border-style: solid;
    border-color: #007998 transparent transparent transparent;
}

再看一下效果：

注：transparent 屬性用來在 background 中將 background-color 選項設置爲背景顏色透明

bingo!就是咱們想要的效果，可是在ie6下杯具鳥！

長長的大黑框，讓人沒法直視，這是由於ie6不支持transparent 透明屬性，這時候咱們能夠將對應區域的border的樣式設置爲dashed，dashed在邊框寬度很大時，會隱藏掉。css修改以下：

.arrow1{
        width: 0px;
        height:0px;
        border-width: 30px;
        border-style: solid;
        border-color: #007998 transparent transparent transparent;
    }

效果以下（ie6下查看）：

可是，到此仍沒有結束，咱們設置個陰影來查看下最終生成的效果：

即使是咱們看到的已經生成一個咱們須要的三角形，可是三角形的佔用高度還是原高度，這會致使在和其餘元素使用時，形成上移的效果。此時，咱們須要把下邊框的高度設置爲0：

.arrow1{
        width: 0px;
        height:0px;
        border-width: 30px 30px 0;
        border-style: solid;
        border-color: #007998 transparent transparent transparent;
    }

再來看看效果：

彷佛還是不太友好，在使用時咱們仍須要修改對應的顏色，能不能根據父元素設定的顏色，顯示對應的顏色呢？咱們須要把border-color修改下：

.arrow1{
    width: 0px;
    height:0px;
    line-height: 0px;
    border-width: 30px 30px 0;
    border-style: solid dashed dashed dashed;
    border-left-color: transparent;
    border-right-color: transparent;
}

效果（使用當前字體顏色）：

固然除了利用css border生成外，咱們還能夠使用特殊字符◇疊加定位來生成，也能夠使用css3的旋轉來生成（ie6下須要hack處理）。利用border是一種經常使用並且簡單兼容的方式