CSS畫三角形的原理

今天遇到一個無序列表，每一行的開始都要用一個小三角形，像這樣，如果在以前，我肯定直接放圖片進去了，然而學習了CSS后，我認為CSS一定能完成這個小圖形。

關鍵需要把元素的寬度、高度設為0。

原理如下：

首先，寫一個with和height都是40px的div，border寬度也是40px，看看是什么效果？

HTML代碼：

<div class="triangle"></div>

css代碼：

.triangle {
    width: 40px;
    height: 40px;
    border-left: 40px solid #000;     /*左邊框*/
    border-right: 40px solid #000;    /*右邊框*/
    border-top: 40px solid #00F;      /*上邊框*/
    border-bottom: 40px solid #00F;   /*下邊框*/
	}

效果如下：

然后，將這個div的width和height無限縮小，是什么效果呢？

HTML代碼：

<div class="triangle"></div>

css代碼：

.triangle {
    width: 0px;                       /*div寬設置為0*/
    height: 0px;                      /*div高設置為0*/
    border-left: 40px solid #000;     /*左邊框*/
    border-right: 40px solid #000;    /*右邊框*/
    border-top: 40px solid #00F;      /*上邊框*/
    border-bottom: 40px solid #00F;   /*下邊框*/
	}

效果如下：

看到了嗎，只剩下40px的邊框，而div盒子的寬和高為0，這時已經是4個三角形組成的正方形了。這樣，我們需要哪個方向的三角形，只要讓border的一邊取消，另兩邊透明即可！

比如我們需要尖角向上的三角形：

.triangle {
    width: 0px;                       /*div寬設置為0*/
    height: 0px;                      /*div高設置為0*/
    border-left: 40px solid transparent;     /*左邊框透明*/
    border-right: 40px solid transparent;    /*右邊框透明*/
                                      /*上邊框取消*/
    border-bottom: 40px solid #00F;   /*下邊框*/
	}

效果如下：

如此，一個尖角向上的三角形就可以用CSS繪制完成！需要其他樣式三角形也是同理！