CSS畫一個三角形，CSS繪制空心三角形，CSS實現箭頭

 壹 ❀ 引

這兩天因為項目工作較少，閑下來去看了GitHub上關於面試題日更收錄的文章，畢竟明年有新的打算。在CSS收錄中有一題是 用css創建一個三角形，並簡述原理 。當然對於我來說畫一個三角形是沒難度的，簡述原理？我突然一愣，雖然我知道通過邊框可以做到，那為什么這么設置邊框可以實現呢，抱着這個疑問於是有了這篇文章，那么本文開始。

 貳 ❀ CSS畫一個三角形

1.不同理解的邊框

寫CSS樣式的同學與邊框border打交道就像每天早上起來擁抱太陽，吃泡面加根腸一樣平常，一直以來在我印象里，邊框就像一條細線，如果用形狀去形容應該是一個長方形。

<div class="border"></div>

.border {
    width: 50px;
    height: 50px;
    border: 2px solid;
    border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

比如這個例子中，在我看來就是四個寬2px高50px且顏色不同的長方形拼湊成了一個正方形。現在我們將border設置大一點，稍微調修改下：

.border {
    width: 50px;
    height: 50px;
    border: 50px solid;
    border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

當border足夠寬，這才反應過來border就像我們在生活中見過的相框，它是由四個梯形拼湊而成。中間白色區域就是元素的寬高，現在我們將元素寬高去除掉：

.border {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

那么現在你想要什么顏色的三角形呢？比如我要中國紅，那就將上，左右邊框顏色設置為透明，這樣就得到了一個紅色有角三倍速（高達梗）。

.border {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: transparent transparent #d9534f;
}

當然這樣還不夠完美，我們可以看到雖然上方沒顏色，還是占據了部分高度，對於強迫症來說真的不舒服，我們再將上邊框高度去除掉。

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
}

這樣就是一個比較完美的三角形了：

3.CSS畫一個空心三角形（只有邊框）

那么現在我們想畫一個只有邊框的空心三角形怎么做呢，首先三角形本身就是由border實現，所以沒法在border上添加border了，最直接的辦法就是再新建一個小一點的三角形定位上去。

這里我使用偽類再定義一個小一點三角形，可以看到是這樣：

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
}
.border:after{
    content: '';
    border-style:solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 0;
    left: 0;
}

可以看到小三角頂端與大三角形對齊，且小三角形左側恰好與大三角形中心部分對齊。這是因為偽類元素定位參照對象的內容區域沒有任何東西，在我們沒隱藏其它三個三角形之前，四個三角形的中心就是父級元素。

那么進行簡單定位微調，可以看到效果變成這樣：

.border:after {
    content: '';
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 6px;
    left: -40px;
}

最后我們將小三角形的邊框顏色換成白色，那么一個只有邊框的空心三角形就誕生了：

4.實現一個箭頭

實現一個箭頭就更好說了，我們將定位的三角形設置的與之前的三角形一樣大，簡單定位，比如這樣：

再將背景色改成白色即可：

當然我們甚至還可以在通過偽類before添加一條直線，讓它看起來更像一個箭頭：

 

 叄 ❀ 總

那么到這里，我們介紹了通過CSS邊框的做法實現一個三角形，同時還介紹了利用小三角定位的模式來畫一個只有邊框的空心三角形，最后還介紹了如何制作一個箭頭，如果在日后工作中遇到這樣的需求，當然也能夠輕松解決了，那么本文就介紹到這里。

 參考

CSS繪制三角形—border法

[css] 第6天 用css創建一個三角形，並簡述原理