方案一：全兼容的 SVG 方案

想要生成一个带圆角的三角形，代码量最少、最好的方式是使用 SVG 生成。

使用 SVG 的 多边形标签 < polygon > 生成一个三边形，使用 SVG 的 stroke-linejoin="round" 生成连接处的圆角。

代码量非常少，核心代码如下：

.triangle {    fill: #0f0;    stroke: #0f0;    stroke-width: 10;}

效果图

通过 stroke-width 控制圆角大小 那么如何控制圆角大小呢？也非常简单，通过控制 stroke-width 的大小，可以改变圆角的大小。 当然，要保持三角形大小一致，在增大/缩小 stroke-width 的同时，需要缩小/增大图形的 width/height。

方案二：图形拼接

可以用正方形变成菱形，然后加圆角

div {    width:  10em;    height: 10em;    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);   border-top-right-radius: 30%;}

拼接 3 个带圆角的菱形

效果图

将上面代码放到html中，可以看到效果！

方案三：图形拼接实现渐变色圆角三角形

本质就是实现一个贝壳形状，然后通过旋转，伪类来实现，贝壳形状做个渐变就可以了。

代码如下：

效果图

直接将上面代码放到html中，就可以看到效果了！

小结

本文列举了实现圆角三角形的方案，具体项目中用到需要动态的化，还需要特殊对待。

参考文章：How to make 3-corner-rounded triangle in CSS