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;
}
通过 st roke-w i dt h 控制圆⾓⼤⼩
那么如何控制圆⾓⼤⼩呢？也⾮常简单，通过控制 stroke-width 的⼤⼩，可以改变圆⾓的⼤⼩。
当然，要保持三⾓形⼤⼩⼀致，在增⼤/缩⼩ stroke-width 的同时，需要缩⼩/增⼤图形的 width/height：
完整的 DEMO 你可以戳这⾥：
法⼆. 图形拼接
不过，上⽂提到了，使⽤纯 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%;
svg图形}
⾄此，我们就顺利的得到⼀个带圆⾓的菱形了！
拼接 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%);
}
就可以得到⼀个圆⾓三⾓形了！效果如下：
完整的代码你可以戳这⾥：
法三. 图形拼接实现渐变⾊圆⾓三⾓形
完了吗？没有！
上述⽅案，虽然不算太复杂，但是有⼀点还不算太完美的。就是⽆法⽀持渐变⾊的圆⾓三⾓形。像是
这样：
如果需要实现渐变⾊圆⾓三⾓形，还是有点复杂的。但真就还有⼈⿎捣出来了，下述⽅法参考⾄ -- 。
同样也是利⽤了多块进⾏拼接，但是这次我们的基础图形，会⾮常的复杂。
⾸先，我们需要实现这样⼀个容器外框，和上述的⽅法⽐较类似，可以理解为是⼀个圆⾓菱形（画出 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);
}
最终得到⼀个渐变圆⾓三⾓形：
上述各个图形的完整代码，你可以戳这⾥：
最后
本⽂介绍了⼏种在 CSS 中实现带圆⾓三⾓形的⽅式，虽然部分有些繁琐，但是也体现了 CSS ”有趣且折磨⼈“ 的⼀⾯，具体应⽤的时候，还是要思考⼀下，对是否使⽤上述⽅式进⾏取舍，有的时候，切图也许是更好的⽅案。
好了，本⽂到此结束，希望对你有帮助
更多精彩 CSS 技术⽂章汇总在我的 ，持续更新，欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议，可以多多交流，原创⽂章，⽂笔有限，才疏学浅，⽂中若有不正之处，万望告知。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论