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建立一個三角形，並簡述原理