配圖源自 Freepik

本文將會(huì)詳細(xì)介紹如何使用純 CSS 實(shí)現(xiàn)各種三角形。文末會(huì)推薦一個(gè)在線工具。

了解邊框

我們知道，任何 HTML 元素其實(shí)都是一個(gè)矩形的盒子。通過(guò)以下 CSS 屬性可以設(shè)置元素的四條邊框：

• border-top
• border-right
• border-bottom
• border-left

話不多說(shuō)，先看示例：

<!-- 為了方便截圖，父元素寬度設(shè)置為 300px -->
<div class="rect">some text...</div>

.rect {
  border-top: 30px solid red;
  border-right: 30px solid green;
  border-bottom: 30px solid blue;
  border-left: 30px solid orange;
}

接著，我們把 div 的文本干掉，再看下效果：

<div class="rect"></div>

由于 div 是塊級(jí)元素，它默認(rèn)占滿父元素的寬度（截圖中父元素寬度為 300px）。

然后，我們把 div 的 width 和 height 均設(shè)為 0，再看下效果：

.rect {
  width: 0;
  height: 0;
  border-top: 30px solid red;
  border-right: 30px solid green;
  border-bottom: 30px solid blue;
  border-left: 30px solid orange;
}

到這里，我想你應(yīng)該知道如何設(shè)置各種形狀的三角形了，最起碼思路是有了。

只要把邊、邊框背景組合一下，就能實(shí)現(xiàn)各種形狀了。

直覺(jué)性誤區(qū)

假設(shè)我們要做一個(gè)左下邊（橙藍(lán)）組成的直角三角形，那是不是只要把右上（綠紅）的邊框干掉就行？

.rect {
  width: 0;
  height: 0;
  /* border-top: 30px solid red; */
  /* border-right: 30px solid green; */
  border-bottom: 30px solid blue;
  border-left: 30px solid orange;
}

這似乎不是我們想要的結(jié)果哦！換個(gè)思路，把右上的邊框顏色設(shè)為透明（transparent）呢？

.rect {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid blue;
  border-left: 30px solid orange;
}

這才是我們想要的結(jié)果。

我們來(lái)分析下原因：

由于我們將 div 的 width 和 height 均設(shè)為 0，那么它就靠 border 來(lái)?yè)伍_(kāi)空間了。其中「水平方向」靠 border-left、border-right 來(lái)?yè)伍_(kāi)，「垂直方向」靠 border-top、border-bottom 來(lái)?yè)伍_(kāi)。所以設(shè)置四條邊為 30px 的時(shí)候，它占用了 60 × 60 的空間。一旦我們干掉了上邊框和右邊框，它實(shí)際只占了 30 × 30 的空間，即右下角的部分。

基礎(chǔ)三角形

本文不會(huì)一一列舉各種形狀的示例，道理是相通的，自由組合即可。

如果要實(shí)現(xiàn)以下這個(gè)直角三角形，有多少種做法呢？

我們做個(gè)輔助線，就很清晰了。

共有三種方式可實(shí)現(xiàn)：橙色 + 紅色、二分之一橙色、二分之一紅色。為了方便舉例，以下示例不設(shè)為相同的顏色，實(shí)現(xiàn)需求形狀即可，大小也請(qǐng)自行調(diào)整。

橙色 + 紅色

四條邊均不能省略，其中 border-top 和 border-left 設(shè)為相同的顏色，border-right 和 border-bottom 設(shè)為透明色。

.rect {
  width: 0;
  height: 0;
  border-top: 30px solid red;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid orange;
}

二分之一橙色

不設(shè)置 border-top 和 border-right 兩條邊。boder-bottom 設(shè)為透明色，border-left 設(shè)置背景色。

.rect {
  width: 0;
  height: 0;
  border-bottom: 30px solid transparent;
  border-left: 30px solid orange;
}

二分之一紅色

不設(shè)置 border-left 和 border-bottom 兩條邊。boder-right 設(shè)為透明色，border-top 設(shè)置背景色。

.rect {
  width: 0;
  height: 0;
  border-top: 30px solid red;
  border-right: 30px solid transparent;
}

特殊三角形

有時(shí)候可能要實(shí)現(xiàn)等腰三角形、等邊三角形等。道理很簡(jiǎn)單，無(wú)非就是按要求先把寬高計(jì)算出來(lái)，然后設(shè)置對(duì)應(yīng)邊的 border-width 即可。

平時(shí)工作當(dāng)然要善用工具了，比如 CSS triangle generator：

既能選擇各種形狀，也能輸入設(shè)置寬高，那還用得著自己計(jì)算呢，對(duì)吧。

總結(jié)

使用 CSS 來(lái)畫三角形，無(wú)非就是將元素的寬高設(shè)為 0，然后將四條邊自由組合就能畫出各種形狀。較為麻煩的是，特殊三角形寬高需計(jì)算，但已經(jīng)有工具在幫我們做這件事了，所以非常輕松就能完成了。

The end.