css实现圆角三角形，圆角三角形的实现

女爷i 2023-10-15 20:08 37阅读 0赞

今天给大家带来一个如何实现圆角三角形的方案，这个方案虽然可以实现，但是也是借助拼凑等方式来实现的，假如想一个div来实现圆角三角形，还是比较困难的。之前文章讲了如何[实现对话框][Link 1]，里面介绍了三角形的实现方式。今天讲讲如何实现圆角三角形。

### 方案一：全兼容的 SVG 方案 ###

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

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

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

通过 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中，可以看到效果！

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

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

代码如下：

<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中，就可以看到效果了！![b32b65008c604dc285b2d09df3615bd3.png][]

[Link 1]: https://www.haorooms.com/post/css_dhk
[b32b65008c604dc285b2d09df3615bd3.png]: https://img-blog.csdnimg.cn/b32b65008c604dc285b2d09df3615bd3.png