css圆角三角形的实现代码

2年前 (2024-04-06)CSS2.7k

复制本页网址打印

方案一：全兼容的 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圆角三角形的实现代码的内容到这里就结束了，喜欢的话可以给我们点赞鼓励~

打赏

重要声明
当前栏目内容除非特别标注，否则均来源于网络公开信息整理分享，本站不提供存储和下载服务，且无法保证第三方链接永久可靠。您若对本站或当前页面内容有疑问或者建议，欢迎联系我们反馈，我们将尽快与您互动，谢谢支持！