（以下純屬吃飽了撐的，不想折磨自己還得是?svg）

最近做了一個(gè)設(shè)計(jì)，需要在前端畫(huà)圓角三角形。

非圓角三角形其實(shí)反向利用 CSS border 的原理是很好實(shí)現(xiàn)的，不再贅述。

但是假如想要實(shí)現(xiàn)圓角的需求，那么 border 騷操作是無(wú)能為力的。因此這里使用的思路是通過(guò)正方形進(jìn)行二維變形來(lái)進(jìn)行旋轉(zhuǎn)。

首先畫(huà)一個(gè)正方形，僅設(shè)置右上角含有弧度。

設(shè)置旋轉(zhuǎn)。

接下來(lái)涉及到一點(diǎn)簡(jiǎn)單的幾何學(xué)：剪切變形和相似三角形。

首先是剪切變形。

在這一步當(dāng)中，各點(diǎn)的坐標(biāo)沒(méi)有發(fā)生改變，但坐標(biāo)系不再是平面直角坐標(biāo)系。換言之，skew 旋轉(zhuǎn)的是坐標(biāo)軸，而不是圖形本身。

但是雖然各點(diǎn)的坐標(biāo)沒(méi)有發(fā)生改變，但是由于坐標(biāo)軸產(chǎn)生了旋轉(zhuǎn)，因此它們的長(zhǎng)度不再相等。上圖中可以看到左邊的斜邊明顯是長(zhǎng)于右邊的。這會(huì)在在下一步中進(jìn)行修正。

首先要知道這個(gè)長(zhǎng)度的變形是怎么來(lái)的：在平面直角坐標(biāo)系中存在的直角三角形，由于坐標(biāo)軸進(jìn)行了偏轉(zhuǎn)，原來(lái)的直角邊變成了斜邊，但是長(zhǎng)度不變。

通過(guò)輔助線(xiàn)可以更加清晰的看到這個(gè)過(guò)程：

又因?yàn)樾D(zhuǎn)的角度已知，是 30o，因此作出兩個(gè)角度分別為 30o，60o，90o 的直角三角形。設(shè)變形后的斜邊長(zhǎng)度為 1，可知：

因此得到最后一個(gè)修正變量，將原圖形按 Y 軸縮放至 0.866 倍。

這樣三角形的一個(gè)部件就做出來(lái)了。最后一步就很簡(jiǎn)單了，根據(jù)相同的原理用 :before 和 :after 偽元素把部件復(fù)制兩份再移動(dòng)到相應(yīng)的位置：

至此完成了一個(gè)完整的變換過(guò)程。

演示鏈接：

https://codepen.io/markchen9804/pen/wvmBRWe