共计 3306 个字符，预计需要花费 9 分钟才能阅读完成。
之前在这篇文章中 —《陈词滥调之 CSS 实现三角形》，介绍了 6 种应用 CSS 实现三角形的形式。
然而其中漏掉了一个十分重要的场景，如何应用纯 CSS 实现带圆角的三角形呢？，像是这样：
本文将介绍几种实现带圆角的三角形的实现形式。
法一. 全兼容的 SVG 大法
想要生成一个带圆角的三角形，代码量起码、最好的形式是应用 SVG 生成。
应用 SVG 的 多边形标签 <polygon> 生成一个三边形，应用 SVG 的 stroke-linejoin="round" 生成连接处的圆角。
代码量非常少，外围代码如下：
<svg width="250" height="250" viewBox="-50 -50 300 300">
<polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200"/>
</svg>.triangle {
fill: #0f0;
stroke: #0f0;
stroke-width: 10;
}理论图形如下：
这里，其实是借助了 SVG 多边形的 stroke-linejoin: round 属性生成的圆角，stroke-linejoin 是什么？它用来管制两条描边线段之间，有三个可选值：
miter是默认值，示意用方形画笔在连接处造成尖角round示意用圆角连贯，实现平滑成果bevel连接处会造成一个斜接
咱们理论是 通过一个带边框，且边框连贯类型为 stroke-linejoin: round 的多边形生成圆角三角形的。
如果，咱们把底色和边框色辨别开，理论是这样的：
.triangle {
fill: #0f0;
stroke: #000;
stroke-width: 10;
}
通过 stroke-width 管制圆角大小
那么如何管制圆角大小呢？也非常简单，通过管制 stroke-width 的大小，能够扭转圆角的大小。
当然，要放弃三角形大小统一，在增大 / 放大 stroke-width 的同时，须要放大 / 增大图形的 width/height：
残缺的 DEMO 你能够戳这里：CodePen Demo — 应用 SVG 实现带圆角的三角形
法二. 图形拼接
不过，上文提到了，应用纯 CSS 实现带圆角的三角形，然而上述第一个办法其实是借助了 SVG。那么仅仅应用 CSS，有没有方法呢？
当然，发散思维，CSS 有意思的中央正在于此处，用一个图形，可能有十分多种奇妙的解决方案！
咱们看看，一个圆角三角形，它其实能够被拆分成几个局部：
所以，其实咱们只须要可能画出一个这样的带圆角的菱形，通过 3 个进行旋转叠加，就能失去圆角三角形：
绘制带圆角的菱形
那么，接下来咱们的指标就变成了绘制一个带圆角的菱形，办法有很多，本文给出其中一种形式：
- 首先将一个正方形变成一个菱形，利用
transform有一个固定的公式：
<div></div>div {
width: 10em;
height: 10em;
transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
}
-
将其中一个角变成圆角：
div { width: 10em; height: 10em; transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866); + border-top-right-radius: 30%; }
至此，咱们就顺利的失去一个带圆角的菱形了！
拼接 3 个带圆角的菱形
接下来就很简略了，咱们只须要利用元素的另外两个伪元素，再生成 2 个带圆角的菱形，将一共 3 个图形旋转位移拼接起来即可！
残缺的代码如下：
<div></div>div{
position: relative;
background-color: orange;
}
div:before,
div:after {
content: '';
position: absolute;
background-color: inherit;
}
div,
div:before,
div:after {
width: 10em;
height: 10em;
border-top-right-radius: 30%;
}
div {transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
div:before {transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%);
}
div:after {transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}就能够失去一个圆角三角形了！成果如下：
残缺的代码你能够戳这里：CodePen Demo — A triangle with rounded
法三. 图形拼接实现渐变色圆角三角形
完了吗？没有！
上述计划，尽管不算太简单，然而有一点还不算太完满的。就是无奈反对渐变色的圆角三角形。像是这样：
如果须要实现渐变色圆角三角形，还是有点简单的。但真就还有人鼓捣进去了，下述办法参考至 — How to make 3-corner-rounded triangle in CSS。
同样也是利用了多块进行拼接，然而这次咱们的根底图形，会十分的简单。
首先，咱们须要实现这样一个容器外框，和上述的办法比拟相似，能够了解为是一个圆角菱形（画出 border 不便了解）：
<div></div>div {
width: 200px;
height: 200px;
transform: rotate(30deg) skewY(30deg) scaleX(0.866);
border: 1px solid #000;
border-radius: 20%;
}接着，咱们同样应用两个伪元素，实现两个稍显怪异的图形进行拼接，算是对 transform 的各种用法的合集：
div::before,
div::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
}
div::before {
border-radius: 20% 20% 20% 55%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
background: red;
}
div::after {
border-radius: 20% 20% 55% 20%;
background: blue;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}为了不便了解，制作了一个简略的变换动画：
实质就是实现了这样一个图形：
最初，给父元素增加一个 overflow: hidden 并且去掉父元素的 border 即可失去一个圆角三角形：
因为这两个元素重叠空间的非凡构造，此时，给两个伪元素增加同一个渐变色，会完满的叠加在一起：
div::before,
div::after, {background: linear-gradient(#0f0, #03a9f4);
}最终失去一个突变圆角三角形：
上述各个图形的残缺代码，你能够戳这里：CodePen Demo — A triangle with rounded and gradient background
最初
本文介绍了几种在 CSS 中实现带圆角三角形的形式，尽管局部有些繁琐，然而也体现了 CSS”乏味且折磨人“的一面，具体利用的时候，还是要思考一下，对是否应用上述形式进行取舍，有的时候，切图兴许是更好的计划。
好了，本文到此结束，心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
