用CSS繪製三角形

引入

用 CSS 繪製三角形，只是對 border 屬性的簡單應用。平時使用 border 屬性的時候多留意一下，就會發現其中的技巧。下面，咱們先看如下代碼：

HTML代碼：
<div class="test"></div>
----------
CSS代碼：
.test{
    width: 10px;
    height: 10px;
    border-top: 50px solid black;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;
}

效果以下：

不難看出，當盒子內容的寬度和高度遠小於邊框的時候，邊框的顯示爲等腰梯形。由此咱們能夠推斷，當咱們將 div 的寬高都設爲 0 的時候，表明盒子內容的白色正方形會消失，於此同時，邊框顯示爲等腰三角形。代碼以下：

HTML代碼：
<div class="test"></div>
----------
CSS代碼：
.test{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;
}

效果以下：

繪製

此時，咱們就能夠根據上述的內容畫出不一樣朝向的三角形了，例如：當咱們須要一個朝上的三角形，就不須要設置上邊框，其餘的以此類推。代碼以下：

HTML代碼：
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
----------
CSS代碼：
.test1{
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
    border-left: 50px solid transparent;
}
.test2{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid orange;
}
.test3{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}
.test4{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 50px solid red;
    border-bottom: 50px solid transparent;

效果以下：

更進一步

在實現繪製的代碼中，咱們會注意到，每一個三角形都有兩個邊框的 border-color 屬性被設置成 transparent。至於爲何，咱們能夠改變該屬性值來嘗試一下，代碼以下：

HTML代碼：
<div class="test"></div>
CSS代碼：
.test{
    width: 0;
    height: 0;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;
}

效果以下：

對比徹底設置邊框和上面少設置一項邊框的效果圖，能夠看出，橙色和紅色三角形各自缺乏了上面的一半。由此可知，咱們必須設置三個邊框的，且位於兩側的邊框的 border-color 屬性應設置爲 transparent。

總結

寫這篇總結也是看到最近有人提出該方面問題，想起當初本身作的嘗試，因此寫出來水一篇文章。寫的比較簡陋，之後有機會再作充實，請多多指導。

關於使用CSS繪製簡單圖形，推薦學習ICONO:純CSS圖標