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

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

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

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

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

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

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

<div></div>

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

效果圖：

border的一般使用

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

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

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

效果圖：

border的形成方式

既然如此，那么更進(jìn)一步，把元素的內(nèi)容尺寸設(shè)置為0會(huì)發(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)該怎么做？很簡(jiǎn)單，我們只需要把其它border邊的顏色設(shè)置為 白色或 透明色：

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}

最終效果

Duang~ 最終的簡(jiǎn)單三角形就繪制出來(lái)了。同理，如果想要得到其它邊上的三角形，只需要將剩余的border邊顏色設(shè)置為白色或透明色即可。

不過(guò)，被“隱藏”的上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ù)通過(guò)為已有三角形設(shè)置border的方法來(lái)為其設(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)色三角形

隨后需要定義黃色三角形，由于黃色三角形的定位需要參考藍(lán)色三角形的位置，所以需要用到絕對(duì)定位方法。為此還需要將黃色三角形作為藍(lán)色三角形的子元素。一個(gè)可行的辦法是在藍(lán)色三角形內(nèi)部定義一個(gè)額外的標(biāo)簽以表示黃色三角形，但為了節(jié)約標(biāo)簽起見(jiàn)，更好的辦法是使用 偽元素:

#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ì)有這樣的疑問(wèn)：為什么黃色三角形會(huì)向左偏移一段距離呢，按道理不應(yīng)該完全重合在藍(lán)色三角形上嗎，就像這樣下面這樣？

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

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

絕對(duì)定位區(qū)域

對(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ì)得到怎樣的定位效果？（下圖所示）

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

搞懂了絕對(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;
}

得到：

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

在上面的代碼中，特意刪除了之前對(duì) width: 0 和 height: 0 的設(shè)置，因?yàn)樽釉鼐哂?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)類(lèi)似如下三角形箭頭自然也是不在話(huà)下了：

三角形箭頭

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

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

右直角三角

或者：

左直角三角

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

css的基本語(yǔ)法是什么

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

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

標(biāo)題名稱(chēng)：如何使用CSS繪制三角形
文章來(lái)源：http://www.chinadenli.net/article12/gidsdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、微信公眾號(hào)、標(biāo)簽優(yōu)化、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)