如何使用CSS繪制三角形？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

成都創(chuàng)新互聯(lián)10余年專注成都高端網(wǎng)站建設(shè)按需定制網(wǎng)站服務(wù),為客戶提供專業(yè)的成都網(wǎng)站制作,成都網(wǎng)頁設(shè)計(jì),成都網(wǎng)站設(shè)計(jì)服務(wù);成都創(chuàng)新互聯(lián)服務(wù)內(nèi)容包含成都網(wǎng)站建設(shè),成都小程序開發(fā),軟件開發(fā),網(wǎng)絡(luò)營銷推廣,網(wǎng)絡(luò)運(yùn)營服務(wù)及企業(yè)形象設(shè)計(jì);成都創(chuàng)新互聯(lián)擁有眾多專業(yè)的高端網(wǎng)站制作開發(fā)團(tuán)隊(duì),資深的高端網(wǎng)頁設(shè)計(jì)團(tuán)隊(duì)及經(jīng)驗(yàn)豐富的架構(gòu)師高端網(wǎng)站策劃團(tuán)隊(duì);我們始終堅(jiān)持從客戶的角度出發(fā),為客戶量身訂造網(wǎng)絡(luò)營銷方案，解決網(wǎng)絡(luò)營銷疑問。

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

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

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

實(shí)現(xiàn)原理：

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

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

效果圖：

border的一般使用

這是我們平常使用border最普遍的情況——往往只給border一個(gè)較小的寬度（通常為1-2px）；然而這樣的日常用法就會容易讓大家對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;
}

效果圖：

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)，此時(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)這樣的效果，需要利用 絕對定位方法：

首先定義出外面的藍(lán)色三角形：

#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)色三角形的子元素。一個(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寬度的共同影響。

可能會有這樣的疑問：為什么黃色三角形會向左偏移一段距離呢，按道理不應(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ū)域就是該三角形的上頂點(diǎn)：

絕對定位區(qū)域

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

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

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

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

搞懂了絕對定位后，只需要在原代碼上稍作修改就可以將黃色三角形的頂點(diǎn)與藍(lán)色三角形頂點(diǎn)相重合，同時(shí)還應(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)色三角形頂點(diǎn)重合

在上面的代碼中，特意刪除了之前對 width: 0 和 height: 0 的設(shè)置，因?yàn)樽釉鼐哂?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é)會了帶邊框三角形的繪制，那么實(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即可（其它情況同理）。

css的基本語法是什么

css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個(gè)屬性和一個(gè)值組成；4、屬性和屬性值被冒號分隔開。

看完上述內(nèi)容，你們掌握如何使用CSS繪制三角形的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！