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; } 效果图
通过 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 个带圆角的菱形
<style> div{ position: relative; background-color: orange; margin:50px auto; } 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%); } </style> <div></div> 效果图
将上面代码放到html中，可以看到效果！
方案三：图形拼接实现渐变色圆角三角形
本质就是实现一个贝壳形状，然后通过旋转，伪类来实现，贝壳形状做个渐变就可以了。
代码如下：
<div></div> <style> div { width: 200px; height: 200px; transform: rotate(30deg) skewY(30deg) scaleX(0.866); border-radius: 20%; margin-top:70px; overflow: hidden; border: unset; } div::before, div::after { content: ""; position: absolute; width: 200px; height: 200px; } div::before { border-radius: 20% 20% 20% 55%; background: #000; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%); } div::after { border-radius: 20% 20% 55% 20%; background: #000; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%); } div::before, div::after { background: linear-gradient(#0f0, #03a9f4); } </style> 效果图
直接将上面代码放到html中，就可以看到效果了！
小结
本文列举了实现圆角三角形的方案，具体项目中用到需要动态的化，还需要特殊对待。
益吾库今天分享的这篇关于css圆角三角形的实现代码的内容到这里就结束了，喜欢的话可以给我们点赞鼓励~
