本文將會詳細(xì)介紹如何使用純 CSS 實現(xiàn)各種三角形。文末會推薦一個在線工具盟劫。
了解邊框
我們知道饰迹，任何 HTML 元素其實都是一個矩形的盒子。通過以下 CSS 屬性可以設(shè)置元素的四條邊框：
- border-top
- border-right
- border-bottom
- border-left
話不多說躬窜，先看示例：
<!-- 為了方便截圖浇垦，父元素寬度設(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 是塊級元素男韧，它默認(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è)置各種形狀的三角形了口锭，最起碼思路是有了朦前。
只要把邊、邊框背景組合一下鹃操，就能實現(xiàn)各種形狀了韭寸。
直覺性誤區(qū)
假設(shè)我們要做一個左下邊（橙藍(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é)果哦恩伺！換個思路，把右上的邊框顏色設(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é)果晶渠。
我們來分析下原因：
由于我們將 div 的
width和height均設(shè)為0凰荚，那么它就靠border來撐開空間了。其中「水平方向」靠border-left褒脯、border-right來撐開便瑟，「垂直方向」靠border-top、border-bottom來撐開番川。所以設(shè)置四條邊為 30px 的時候到涂，它占用了 60 × 60 的空間。一旦我們干掉了上邊框和右邊框爽彤，它實際只占了 30 × 30 的空間养盗，即右下角的部分。
基礎(chǔ)三角形
本文不會一一列舉各種形狀的示例适篙，道理是相通的往核，自由組合即可。
如果要實現(xiàn)以下這個直角三角形嚷节，有多少種做法呢聂儒？
我們做個輔助線，就很清晰了硫痰。
共有三種方式可實現(xiàn)：橙色 + 紅色衩婚、二分之一橙色、二分之一紅色效斑。為了方便舉例非春，以下示例不設(shè)為相同的顏色，實現(xiàn)需求形狀即可缓屠，大小也請自行調(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;
}
特殊三角形
有時候可能要實現(xiàn)等腰三角形、等邊三角形等脯颜。道理很簡單哟旗，無非就是按要求先把寬高計算出來，然后設(shè)置對應(yīng)邊的 border-width 即可。
平時工作當(dāng)然要善用工具了热幔，比如 CSS triangle generator：
既能選擇各種形狀，也能輸入設(shè)置寬高讼庇，那還用得著自己計算呢绎巨，對吧。
總結(jié)
使用 CSS 來畫三角形蠕啄，無非就是將元素的寬高設(shè)為 0场勤，然后將四條邊自由組合就能畫出各種形狀。較為麻煩的是歼跟，特殊三角形寬高需計算和媳，但已經(jīng)有工具在幫我們做這件事了，所以非常輕松就能完成了哈街。
The end.
