如何使用CSS繪制三角形

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

1. 實現一個簡單的三角形

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

CSS實現簡單三角形

實現原理：

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

<div></div>

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

效果圖：

border的一般使用

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

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

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

效果圖：

border的形成方式

既然如此，那么更進一步，把元素的內容尺寸設置為0會發生什么情況呢？

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

效果圖：

元素內容尺寸為0

我們將驚奇地發現，此時元素由上下左右4個三角形“拼接”而成；那么，為了實現最終的效果，即保留最下方的三角形，還應該怎么做？很簡單，我們只需要把其它border邊的顏色設置為 白色 或 透明色 ：

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

最終效果

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

不過，被“隱藏”的上border仍然占據著空間，要想使得繪制出的三角形尺寸最小化，還需要將上border的寬度設置為0（其它情況同理）：

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

2. 實現帶邊框的三角形

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

帶邊框的三角形

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

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

首先定義出外面的藍色三角形：

<div id="blue"><div>

#blue {
    position:relative;
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent blue;
}

效果為：

外圍藍色三角形

隨后需要定義黃色三角形，由于黃色三角形的定位需要參考藍色三角形的位置，所以需要用到絕對定位方法。為此還需要將黃色三角形作為藍色三角形的子元素。一個可行的辦法是在藍色三角形內部定義一個額外的標簽以表示黃色三角形，但為了節約標簽起見，更好的辦法是使用 偽元素 :

#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;
}

得到的效果為：

定義黃色三角形

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

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

黃色三角形與藍色三角形完全重合

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

絕對定位區域

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

由于黃色三角形的內容區域也位于其頂點處，且對其設置了左右各40px的border，所以黃色三角形的內容區域將向右偏移40px，從而形成了之前的效果。

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

黃色三角形設置為left: 0和bottom: 0

搞懂了絕對定位后，只需要在原代碼上稍作修改就可以將黃色三角形的頂點與藍色三角形頂點相重合，同時還應該適當縮小黃色三角形的尺寸（按相似三角形等比例縮小）：

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

得到：

黃色三角形與藍色三角形頂點重合

在上面的代碼中，特意刪除了之前對 width: 0 和 height: 0 的設置，因為子元素具有 position:absolute 設置，這會使得元素尺寸在不顯式設置寬度和高度的情況下，收縮到元素內容的尺寸，由于內容設置的是 content: "" ，所以子元素的尺寸默認也就是0了。故設置 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;
}

得到最終效果：

最終效果

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

三角形箭頭

實現代碼：

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

3. 繪制其它角度的三角形

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

右直角三角

或者：

左直角三角

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

css的基本語法是什么

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

看完上述內容，你們掌握如何使用CSS繪制三角形的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！