本文将向您介绍 3 种用 CSS 绘制圆角三角形的方法。 有一定的参考价值，有需要的同学可以参考一下，希望对大家有所帮助。
图像
之前在这篇文章《利用CSS勾画三角形的6种方法（分享）》中，介绍了利用CSS实现三角形的6种形式。
而且还漏掉了一个很重要的场景，如何用纯CSS实现圆角三角形？ ， 像这样：
1.png
本文将介绍几种实现圆角三角形的实现方法。
方法一、完全兼容SVG大法
生成圆角三角形的最佳且代码密集程度最低的方法是使用 SVG。
使用 SVG 的六边形标签
生成一个三角形并使用SVG的strike-linejoin="round"在连接处生成圆角。
代码量很小，核心代码如下：
.triangle {
fill: #0f0;
stroke: #0f0;
stroke-width: 10;
}
实际的图表如下：
2.png
这里，虽然圆角是使用SVG六边形的strike-linejoin:round属性生成的，但是什么是strike-linejoin呢？ 用于控制两条掩模线之间的距离，有三个可选值：
3.png
我们实际上通过带有边框和边框连接类型为Stroke-lineJoin:round的六边形生成圆角三角形。
如果我们区分背景颜色和边框颜色，它实际上是这样的：
.triangle {
fill: #0f0;
stroke: #000;
stroke-width: 10;
}
4.png
通过描边宽度控制圆角大小
那么如何控制圆角尺寸呢？ 也很简单，通过控制描边宽度的大小，就可以改变圆角的大小。
事实上，为了保持三角形的大小一致，您需要在减少/减少描边宽度的同时减少/减少图形的宽度/高度：
5.png
完整DEMO可以点击这里：CodePenDemo--使用SVG实现圆角三角形
不过，如上所述，使用纯CSS来实现圆角三角形，而上面的第一种方法使用了SVG。 那么只使用CSS，有什么办法吗？
其实发散思维css3 三角形怎么写，CSS有趣的地方就在这里。 一张图，才能有多种巧解！
让我们看看，一个圆角三角形，尽管它可以分成几个部分：
6.png
因此，虽然我们只需要能够画出这样一个圆角矩形，但是通过旋转叠加三者就可以得到一个圆角三角形：
7.png
勾勒出一个带圆角的矩形
这样，我们的目标就是画出一个圆角的矩形。 有很多技巧。 本文给出了其中一种方法：
1、首先将正圆变成长方形，利用transform得到固定的公式：
div {
width: 10em;
height: 10em;
transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
}
1.gif
9.gif
2. 将一个角倒圆：
div {
width: 10em;
height: 10em;
transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
+ border-top-right-radius: 30%;
}
10.png
至此，我们就成功得到了一个圆角的矩形了！
缝合3个圆角矩形
连接起来非常简单css3 三角形怎么写，我们只需要利用该元素的另外两个伪元素生成两个圆角矩形，将总共三个图形的旋转和位移拼接在一起即可！
完整代码如下：
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%);
}
你可以得到一个圆角三角形！ 疗效如下：
11.png
完整代码可以戳这里：CodePenDemo--Atrianglewithrounded
方法三、图形拼接实现渐变色圆角三角形
完成了吗？ 不！
虽然上面的方案并不算太复杂，而且有一点还不完美。 很难支持具有渐变颜色的圆角三角形。 像这样：
12.png
如果需要实现渐变圆角三角形，还是有点复杂。 但仍然有人在摆弄它。 以下方法参考CSS中的--Howtomake3-corner-roundedtriangle。
也是采用多块进行拼接，不过这次我们的基础图形会特别复杂。
首先我们需要实现这样一个容器框架，与上面的方法类似，可以理解为圆角矩形（为了方便理解画了边框）：
13.png
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%);
}
为了方便理解，制作了一个简单的变换动画：
14.gif
本质就是实现这样一个图：
15.png
最后，给父元素添加overflow:hidden，但去掉父元素的边框，得到一个圆角三角形：
16.png
由于这两个元素重叠空间的特殊结构，此时给两个伪元素添加相同的渐变色，就会将它们完美地叠加在一起：
div::before,
div::after, {
background: linear-gradient(#0f0, #03a9f4);
}
最终结果是一个渐变圆角三角形：
17.png
以上图形的完整代码可以戳这里：CodePenDemo--Atrianglewithroundedandgradientbackground
终于
本文介绍了CSS中实现圆角三角形的几种方法。 即使有些部分有点冗长，也显示出了CSS“有趣且具有破坏性”的一面。 到了具体应用的时候，还是要考虑是否使用上面的方法做出选择。 有时候，剪切图片实际上是更好的解决方案。
好了，这篇文章就到此结束了，希望对你有帮助:)
