CSS畫三角形的原理

今天遇到一個(gè)無(wú)序列表，每一行的開始都要用一個(gè)小三角形，像這樣，如果在以前，我肯定直接放圖片進(jìn)去了，然而學(xué)習(xí)了CSS后，我認(rèn)為CSS一定能完成這個(gè)小圖形。

關(guān)鍵需要把元素的寬度、高度設(shè)為0。

原理如下：

首先，寫一個(gè)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;   /*下邊框*/
	}

效果如下：

然后，將這個(gè)div的width和height無(wú)限縮小，是什么效果呢？

HTML代碼：

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

css代碼：

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

效果如下：

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

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

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

效果如下：

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