工作中經(jīng)常遇到一些tip提示，tip提示會(huì)有一個(gè)小三角形，我們可以使用圖片或者iconfont實(shí)現(xiàn)，當(dāng)然最高級(jí)的還是用css實(shí)現(xiàn)。下面就簡(jiǎn)單總結(jié)一下如何使用css的border屬性來繪制小三角。
假設(shè)我們有這樣一個(gè)div：

<style>
    .arrow {
        width: 100px;
        height: 100px;
        border: 100px solid;
        border-color: red blue;
    }
</style>
<div class="arrow"></div>

效果如下：

效果圖

我們看到了四個(gè)梯形，那么如何將梯形變成三角形呢？很簡(jiǎn)單，只需將div的寬高設(shè)為0即可。
效果如下：

三角形

<style>
    .arrow {
        width: 0px;
        height: 0px;
        border: 100px solid transparent;
    }
    .arrow-up {
        border-bottom-color: red;
    }
    .arrow-down {
        border-top-color: red;
    }
    .arrow-left {
        border-right-color: red;
    }
    .arrow-right {
        border-left-color: red;
    }
</style>
<div class="arrow arrow-up"></div>
<div class="arrow arrow-down"></div>
<div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div>

上面我們所繪制出的箭頭都是等腰直角三角形，那么如何繪制出來銳角三角形和鈍角三角形呢？
答案很簡(jiǎn)單，只需令邊框的上下寬度和左右寬度不一樣即可。

 <style>
    .arrow {
        width: 0px;
        height: 0px;
        border-width: 100px 50px;
        border-style: solid;
        border-color: transparent;
    }
    .arrow-down {
        border-top-color: red;
    }
</style>
<div class="arrow arrow-down"></div>

效果如下：

銳角三角形

反之，我們令邊框上下寬度小于左右寬度即可得到鈍角三角形。
擴(kuò)展：以上我們只是保留了一條邊框的顏色，當(dāng)然我們也可以保留兩條邊框顏色，例如保留上右邊框顏色，可以得到另一個(gè)等腰直角三角形。我們同樣可以令四條邊框的寬度不一致，得到非等腰三角形。

要點(diǎn)：繪制三角形只需令元素寬高為0，設(shè)置合適的邊框?qū)挾龋Ａ羝渲幸粭l邊框顏色，其余邊框顏色設(shè)為透明。