不使用 SVG 实现一个圆角等边三角形

（以下纯属吃饱了撑的，不想折磨自己还得是 svg）

最近做了一个设计，需要在前端画圆角三角形。

非圆角三角形其实反向利用 CSS border 的原理是很好实现的，不再赘述。

但是假如想要实现圆角的需求，那么 border 骚操作是无能为力的。因此这里使用的思路是通过正方形进行二维变形来进行旋转。

首先画一个正方形，仅设置右上角含有弧度。

设置旋转。

接下来涉及到一点简单的几何学：剪切变形和相似三角形。

首先是剪切变形。

在这一步当中，各点的坐标没有发生改变，但坐标系不再是平面直角坐标系。换言之，skew 旋转的是坐标轴，而不是图形本身。

但是虽然各点的坐标没有发生改变，但是由于坐标轴产生了旋转，因此它们的长度不再相等。上图中可以看到左边的斜边明显是长于右边的。这会在在下一步中进行修正。

首先要知道这个长度的变形是怎么来的：在平面直角坐标系中存在的直角三角形，由于坐标轴进行了偏转，原来的直角边变成了斜边，但是长度不变。

通过辅助线可以更加清晰的看到这个过程：

又因为旋转的角度已知，是 30º，因此作出两个角度分别为 30º，60º，90º 的直角三角形。设变形后的斜边长度为 1，可知：

因此得到最后一个修正变量，将原图形按 Y 轴缩放至 0.866 倍。

这样三角形的一个部件就做出来了。最后一步就很简单了，根据相同的原理用 :before 和 :after 伪元素把部件复制两份再移动到相应的位置：

至此完成了一个完整的变换过程。

演示链接：

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