1. 實現(xiàn)一個簡單的三角形

使用CSS盒模型中的border（邊框）即可實現(xiàn)如下所示的三角形：

CSS實現(xiàn)簡單三角形

實現(xiàn)原理：

首先來看在為元素添加border時，border的樣子；假設(shè)有如下代碼：

<div></div>

div {
    width: 50px;
    height: 50px;
    border: 2px solid orange;
}

效果圖：

border的一般使用

這是我們平常使用border最普遍的情況——往往只給border一個較小的寬度（通常為1-2px）；然而這樣的日常用法就會容易讓大家對border的形成方式產(chǎn)生 誤解 ，即認(rèn)為元素的border是由四個矩形邊框拼接而成。

然而事實并不是這樣。實際上，元素的border是由 三角形 組合而成，為了說明這個問題，我們可以增大border的寬度，并為各border邊設(shè)置不同的顏色：

div {
    width: 50px;
    height: 50px;
    border: 40px solid;
    border-color: orange blue red green;
}

效果圖：

border的形成方式

既然如此，那么更進(jìn)一步，把元素的內(nèi)容尺寸設(shè)置為0會發(fā)生什么情況呢？

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: orange blue red green;
}

效果圖：

元素內(nèi)容尺寸為0

我們將驚奇地發(fā)現(xiàn)，此時元素由上下左右4個三角形“拼接”而成；那么，為了實現(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. 實現(xiàn)帶邊框的三角形

帶邊框的三角形是指為三角形添加其它顏色的邊框，如同為元素添加border一樣：

帶邊框的三角形

由于不能繼續(xù)通過為已有三角形設(shè)置border的方法來為其設(shè)置邊框（因為三角形本身就是利用border實現(xiàn)的），所以只好另想辦法。而能想到的一個最自然的方法就是 三角形疊放 ，即把當(dāng)前三角形疊放在更大的三角形上方，上圖所示的實現(xiàn)方法就是把黃色三角形放在了尺寸更大的藍(lán)色三角形上。

為了實現(xiàn)這樣的效果，需要利用 絕對定位 方法：

首先定義出外面的藍(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)色三角形

隨后需要定義黃色三角形，由于黃色三角形的定位需要參考藍(lán)色三角形的位置，所以需要用到絕對定位方法。為此還需要將黃色三角形作為藍(lán)色三角形的子元素。一個可行的辦法是在藍(lán)色三角形內(nèi)部定義一個額外的標(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;
}

得到的效果為：

定義黃色三角形

需要特別注意此時定義出的黃色三角形與藍(lán)色三角形之間位置的偏移關(guān)系，該偏移將受到 top 、 left （本例中）以及黃色三角形本身border寬度的共同影響。

可能會有這樣的疑問：為什么黃色三角形會向左偏移一段距離呢，按道理不應(yīng)該完全重合在藍(lán)色三角形上嗎，就像這樣下面這樣？

黃色三角形與藍(lán)色三角形完全重合

如果有這樣的疑問，說明還沒有對絕對定位產(chǎn)生足夠的認(rèn)識。絕對定位的區(qū)域是基于 絕對定位父元素的 padding 區(qū)域 ，然后在此基礎(chǔ)上運(yùn)用 top 、 left 、 right 、 bottom 等一系列屬性來約束絕對定位子元素的位置。在本例中，由于藍(lán)色三角形作為絕對定位父元素，其內(nèi)容的尺寸為0，則內(nèi)容區(qū)域就是該三角形的上頂點：

絕對定位區(qū)域

對于黃色三角形，由于設(shè)置了 left: 0 和 top: 0 ，所以黃色三角形的 所有內(nèi)容 （包括border、margin）將根據(jù)藍(lán)色三角形的上頂點進(jìn)行定位。可以把此時 left: 0 和 top: 0 分別看作是兩面“隔墻”——即上隔墻和左隔墻，黃色三角形的所有內(nèi)容只能在上隔墻的下方和左隔墻的右方區(qū)域。

由于黃色三角形的內(nèi)容區(qū)域也位于其頂點處，且對其設(shè)置了左右各40px的border，所以黃色三角形的內(nèi)容區(qū)域?qū)⑾蛴移?0px，從而形成了之前的效果。

想想看將黃色三角形的位置設(shè)置為 left: 0 和 bottom: 0 ,會得到怎樣的定位效果？（下圖所示）

黃色三角形設(shè)置為left: 0和bottom: 0

搞懂了絕對定位后，只需要在原代碼上稍作修改就可以將黃色三角形的頂點與藍(lán)色三角形頂點相重合，同時還應(yīng)該適當(dāng)縮小黃色三角形的尺寸（按相似三角形等比例縮?。?/p>

#blue:after {
    content: "";
    position: absolute;
    top: 0px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

得到：

黃色三角形與藍(lán)色三角形頂點重合

在上面的代碼中，特意刪除了之前對 width: 0 和 height: 0 的設(shè)置，因為子元素具有 position:absolute 設(shè)置，這會使得元素尺寸在不顯式設(shè)置寬度和高度的情況下，收縮到元素內(nèi)容的尺寸，由于內(nèi)容設(shè)置的是 content: "" ，所以子元素的尺寸默認(rèn)也就是0了。故設(shè)置 width: 0 和 height: 0 就變得多余了。

最后一步就是利用 top 將黃色三角形向下移動至合適的位置：

#blue:after {
    content: "";
    position: absolute;
    top: 1px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

得到最終效果：

最終效果

學(xué)會了帶邊框三角形的繪制，那么實現(xiàn)類似如下三角形箭頭自然也是不在話下了：

三角形箭頭

實現(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. 繪制其它角度的三角形

繪制其它角度的三角形，如：

右直角三角

或者：

左直角三角

就更簡單了，其實它們都是基于之前繪制的三角形而來的。如果想繪制右直角三角，則將左border設(shè)置為0；如果想繪制左直角三角，將右border設(shè)置為0即可（其它情況同理）。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論