工作中經(jīng)常遇到一些tip提示，tip提示會有一個小三角形，我們可以使用圖片或者iconfont實現(xiàn)，當然最高級的還是用css實現(xiàn)监署。下面就簡單總結一下如何使用css的border屬性來繪制小三角。
假設我們有這樣一個div：
<style>
.arrow {
width: 100px;
height: 100px;
border: 100px solid;
border-color: red blue;
}
</style>
<div class="arrow"></div>
效果如下：
效果圖
我們看到了四個梯形纽哥，那么如何將梯形變成三角形呢钠乏？很簡單，只需將div的寬高設為0即可春塌。
效果如下：
三角形
那么現(xiàn)在問題就很簡單了晓避，假如我們需要一個向下的箭頭簇捍，只需將其他三個邊框的顏色設為透明就好了。如此我們便可繪制出四個方向不同的箭頭俏拱。
<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>
上面我們所繪制出的箭頭都是等腰直角三角形暑塑，那么如何繪制出來銳角三角形和鈍角三角形呢？
答案很簡單锅必，只需令邊框的上下寬度和左右寬度不一樣即可梯投。
<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>
效果如下：
銳角三角形
反之，我們令邊框上下寬度小于左右寬度即可得到鈍角三角形况毅。
擴展：以上我們只是保留了一條邊框的顏色，當然我們也可以保留兩條邊框顏色尔艇，例如保留上右邊框顏色尔许，可以得到另一個等腰直角三角形。我們同樣可以令四條邊框的寬度不一致终娃，得到非等腰三角形味廊。
要點：繪制三角形只需令元素寬高為0，設置合適的邊框寬度棠耕，保留其中一條邊框顏色余佛，其余邊框顏色設為透明。
