1. 實(shí)現(xiàn)一個(gè)簡單的三角形
使用CSS盒模型中的border（邊框）即可實(shí)現(xiàn)如下所示的三角形：
實(shí)現(xiàn)原理：
首先來看在為元素添加border時(shí)秉扑，border的樣子；假設(shè)有如下代碼：
<div></div>
div {
width: 50px;
height: 50px;
border: 2px solid orange;
}
效果圖：
這是我們平常使用border最普遍的情況——往往只給border一個(gè)較小的寬度（通常為1-2px）调限；然而這樣的日常用法就會(huì)容易讓大家對(duì)border的形成方式產(chǎn)生誤解舟陆，即認(rèn)為元素的border是由四個(gè)矩形邊框拼接而成。
然而事實(shí)并不是這樣耻矮。實(shí)際上秦躯，元素的border是由三角形組合而成，為了說明這個(gè)問題裆装，我們可以增大border的寬度踱承，并為各border邊設(shè)置不同的顏色：
div {
width: 50px;
height: 50px;
border: 40px solid;
border-color: orange blue red green;
}
效果圖：
既然如此，那么更進(jìn)一步哨免，把元素的內(nèi)容尺寸設(shè)置為0會(huì)發(fā)生什么情況呢茎活？
div {
width: 0;
height: 0;
border: 40px solid;
border-color: orange blue red green;
}
效果圖：
我們將驚奇地發(fā)現(xiàn)，此時(shí)元素由上下左右4個(gè)三角形“拼接”而成琢唾；那么载荔，為了實(shí)現(xiàn)最終的效果，即保留最下方的三角形采桃，還應(yīng)該怎么做懒熙？很簡單丘损，我們只需要把其它border邊的顏色設(shè)置為白色或透明色：
div {
width: 0;
height: 0;
border: 40px solid;
border-color: transparent transparent red;
}
Duang~ 最終的簡單三角形就繪制出來了。同理工扎，如果想要得到其它邊上的三角形徘钥，只需要將剩余的border邊顏色設(shè)置為白色或透明色即可。
不過定庵，被“隱藏”的上border仍然占據(jù)著空間吏饿，要想使得繪制出的三角形尺寸最小化，還需要將上border的寬度設(shè)置為0（其它情況同理）：
div {
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent red;
}
2. 實(shí)現(xiàn)帶邊框的三角形
帶邊框的三角形是指為三角形添加其它顏色的邊框蔬浙，如同為元素添加border一樣：
由于不能繼續(xù)通過為已有三角形設(shè)置border的方法來為其設(shè)置邊框（因?yàn)槿切伪旧砭褪抢胋order實(shí)現(xiàn)的）猪落，所以只好另想辦法。而能想到的一個(gè)最自然的方法就是三角形疊放畴博，即把當(dāng)前三角形疊放在更大的三角形上方笨忌，上圖所示的實(shí)現(xiàn)方法就是把黃色三角形放在了尺寸更大的藍(lán)色三角形上。
為了實(shí)現(xiàn)這樣的效果俱病，需要利用絕對(duì)定位方法：
首先定義出外面的藍(lán)色三角形：
<div id="blue"><div>
#blue {
position:relative;
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent blue;
}
效果為：
隨后需要定義黃色三角形官疲，由于黃色三角形的定位需要參考藍(lán)色三角形的位置，所以需要用到絕對(duì)定位方法亮隙。為此還需要將黃色三角形作為藍(lán)色三角形的子元素途凫。一個(gè)可行的辦法是在藍(lán)色三角形內(nèi)部定義一個(gè)額外的標(biāo)簽以表示黃色三角形，但為了節(jié)約標(biāo)簽起見溢吻，更好的辦法是使用偽元素:
#blue:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0px;
left: 0px;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent yellow;
}
得到的效果為：
需要特別注意此時(shí)定義出的黃色三角形與藍(lán)色三角形之間位置的偏移關(guān)系维费，該偏移將受到top、left（本例中）以及黃色三角形本身border寬度的共同影響促王。
可能會(huì)有這樣的疑問：為什么黃色三角形會(huì)向左偏移一段距離呢犀盟，按道理不應(yīng)該完全重合在藍(lán)色三角形上嗎，就像下面這樣蝇狼？
如果有這樣的疑問阅畴，說明還沒有對(duì)絕對(duì)定位產(chǎn)生足夠的認(rèn)識(shí)。絕對(duì)定位的區(qū)域是基于絕對(duì)定位父元素的padding區(qū)域迅耘，然后在此基礎(chǔ)上運(yùn)用top贱枣、left、right豹障、bottom等一系列屬性來約束絕對(duì)定位子元素的位置冯事。在本例中，由于藍(lán)色三角形作為絕對(duì)定位父元素血公，其內(nèi)容的尺寸為0昵仅，則內(nèi)容區(qū)域就是該三角形的上頂點(diǎn)：
對(duì)于黃色三角形，由于設(shè)置了left: 0和top: 0，所以黃色三角形的所有內(nèi)容（包括border摔笤、margin）將根據(jù)藍(lán)色三角形的上頂點(diǎn)進(jìn)行定位够滑。可以把此時(shí)left: 0和top: 0分別看作是兩面“隔墻”——即上隔墻和左隔墻吕世，黃色三角形的所有內(nèi)容只能在上隔墻的下方和左隔墻的右方區(qū)域彰触。
由于黃色三角形的內(nèi)容區(qū)域也位于其頂點(diǎn)處，且對(duì)其設(shè)置了左右各40px的border命辖，所以黃色三角形的內(nèi)容區(qū)域?qū)⑾蛴移?0px况毅，從而形成了之前的效果。
想想看將黃色三角形的位置設(shè)置為left: 0和bottom: 0,會(huì)得到怎樣的定位效果尔艇？（下圖所示）
搞懂了絕對(duì)定位后尔许，只需要在原代碼上稍作修改就可以將黃色三角形的頂點(diǎn)與藍(lán)色三角形頂點(diǎn)相重合，同時(shí)還應(yīng)該適當(dāng)縮小黃色三角形的尺寸（按相似三角形等比例縮兄胀蕖）：
#blue:after {
content: "";
position: absolute;
top: 0px;
left: -38px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent yellow;
}
得到：
在上面的代碼中味廊，特意刪除了之前對(duì)width: 0和height: 0的設(shè)置，因?yàn)樽釉鼐哂?code>position:absolute設(shè)置棠耕，這會(huì)使得元素尺寸在不顯式設(shè)置寬度和高度的情況下余佛，收縮到元素內(nèi)容的尺寸，由于內(nèi)容設(shè)置的是content: ""窍荧，所以子元素的尺寸默認(rèn)也就是0了辉巡。故設(shè)置width: 0和height: 0就變得多余了。
最后一步就是利用top將黃色三角形向下移動(dòng)至合適的位置：
#blue:after {
content: "";
position: absolute;
top: 1px;
left: -38px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent yellow;
}
得到最終效果：
學(xué)會(huì)了帶邊框三角形的繪制蕊退，那么實(shí)現(xiàn)類似如下三角形箭頭自然也是不在話下了：
實(shí)現(xiàn)代碼：
#blue:after {
content: "";
position: absolute;
top: 2px;
left: -38px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent #fff;
}
3. 繪制其它角度的三角形
繪制其它角度的三角形红氯，如：
或者：
就更簡單了，其實(shí)它們都是基于之前繪制的三角形而來的咕痛。如果想繪制右直角三角，則將左border設(shè)置為0喇嘱；如果想繪制左直角三角茉贡，將右border設(shè)置為0即可（其它情況同理）。
