CSS奇思妙想|巧妙的实现带圆角的三角形

之前在这篇文章中 -- 《老生常谈之 CSS 实现三角形》[1]，介绍了 6 种使用 CSS 实现三角形的方式。

但是其中漏掉了一个非常重要的场景，如何使用纯 CSS 实现带圆角的三角形呢?，像是这样：

本文将介绍几种实现带圆角的三角形的实现方式。

法一. 全兼容的 SVG 大法

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

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.  
    4. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. .triangle { 
    2. 
  
  
  
  
  2.     fill: #0f0; 
    3. 
  
  
  
  
  3.     stroke: #0f0; 
    4. 
  
  
  
  
  4.     stroke-width: 10; 
    5. 
  
  
  
  
  5. } 
    6.

实际图形如下：

这里，其实是借助了 SVG 多边形的 stroke-linejoin: round 属性生成的圆角，stroke-linejoin 是什么?它用来控制两条描边线段之间，有三个可选值：

  • miter 是默认值，表示用方形画笔在连接处形成尖角
  • round 表示用圆角连接，实现平滑效果
  • bevel 连接处会形成一个斜接

我们实际是通过一个带边框，且边框连接类型为 stroke-linejoin: round 的多边形生成圆角三角形的。

如果，我们把底色和边框色区分开，实际是这样的：

 
 
 
 
    
  
  
  
  
  1. .triangle { 
    2. 
  
  
  
  
  2.     fill: #0f0; 
    3. 
  
  
  
  
  3.     stroke: #000; 
    4. 
  
  
  
  
  4.     stroke-width: 10; 
    5. 
  
  
  
  
  5. } 
    6.

 

通过 stroke-width 控制圆角大小

那么如何控制圆角大小呢?也非常简单，通过控制 stroke-width 的大小，可以改变圆角的大小。

当然，要保持三角形大小一致，在增大/缩小 stroke-width 的同时，需要缩小/增大图形的 width/height：

完整的 DEMO 你可以戳这里：CodePen Demo -- 使用 SVG 实现带圆角的三角形[2]

法二. 图形拼接

不过，上文提到了，使用纯 CSS 实现带圆角的三角形，但是上述第一个方法其实是借助了 SVG。那么仅仅使用 CSS，有没有办法呢?

当然，发散思维，CSS 有意思的地方正在于此处，用一个图形，能够有非常多种巧妙的解决方案!

我们看看，一个圆角三角形，它其实可以被拆分成几个部分：

所以，其实我们只需要能够画出一个这样的带圆角的菱形，通过 3 个进行旋转叠加，就能得到圆角三角形：

绘制带圆角的菱形

那么，接下来我们的目标就变成了绘制一个带圆角的菱形，方法有很多，本文给出其中一种方式：

1.首先将一个正方形变成一个菱形，利用 transform 有一个固定的公式：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     width:  10em; 
    3. 
  
  
  
  
  3.     height: 10em; 
    4. 
  
  
  
  
  4.     transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866); 
    5. 
  
  
  
  
  5. } 
    6.

 

2.将其中一个角变成圆角：

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     width:  10em; 
    3. 
  
  
  
  
  3.     height: 10em; 
    4. 
  
  
  
  
  4.     transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866); 
    5. 
  
  
  
  
  5.   + border-top-right-radius: 30%; 
    6. 
  
  
  
  
  6. } 
    7.

 

至此，我们就顺利的得到一个带圆角的菱形了!

拼接 3 个带圆角的菱形

接下来就很简单了，我们只需要利用元素的另外两个伪元素，再生成 2 个带圆角的菱形，将一共 3 个图形旋转位移拼接起来即可!

完整的代码如下：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. div{ 
    2. 
  
  
  
  
  2.     position: relative; 
    3. 
  
  
  
  
  3.     background-color: orange; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. div:before, 
    6. 
  
  
  
  
  6. div:after { 
    7. 
  
  
  
  
  7.     content: ''; 
    8. 
  
  
  
  
  8.     position: absolute; 
    9. 
  
  
  
  
  9.     background-color: inherit; 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11. div, 
    12. 
  
  
  
  
  12. div:before, 
    13. 
  
  
  
  
  13. div:after { 
    14. 
  
  
  
  
  14.     width:  10em; 
    15. 
  
  
  
  
  15.     height: 10em; 
    16. 
  
  
  
  
  16.     border-top-right-radius: 30%; 
    17. 
  
  
  
  
  17. } 
    18. 
  
  
  
  
  18. div { 
    19. 
  
  
  
  
  19.     transform: rotate(-60deg) skewX(-30deg) scale(1,.866); 
    20. 
  
  
  
  
  20. } 
    21. 
  
  
  
  
  21. div:before { 
    22. 
  
  
  
  
  22.     transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%); 
    23. 
  
  
  
  
  23. } 
    24. 
  
  
  
  
  24. div:after { 
    25. 
  
  
  
  
  25.     transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%); 
    26. 
  
  
  
  
  26. } 
    27.

就可以得到一个圆角三角形了!效果如下：

完整的代码你可以戳这里：CodePen Demo -- A triangle with rounded[3]

法三. 图形拼接实现渐变色圆角三角形

完了吗?没有!

上述方案，虽然不算太复杂，但是有一点还不算太完美的。就是无法支持渐变色的圆角三角形。像是这样：

如果需要实现渐变色圆角三角形，还是有点复杂的。但真就还有人鼓捣出来了，下述方法参考至 -- How to make 3-corner-rounded triangle in CSS[4]。

同样也是利用了多块进行拼接，但是这次我们的基础图形，会非常的复杂。

首先，我们需要实现这样一个容器外框，和上述的方法比较类似，可以理解为是一个圆角菱形(画出 border 方便理解)：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     width: 200px; 
    3. 
  
  
  
  
  3.     height: 200px; 
    4. 
  
  
  
  
  4.     transform: rotate(30deg) skewY(30deg) scaleX(0.866); 
    5. 
  
  
  
  
  5.     border: 1px solid #000; 
    6. 
  
  
  
  
  6.     border-radius: 20%; 
    7. 
  
  
  
  
  7. } 
    8.

接着，我们同样使用两个伪元素，实现两个稍显怪异的图形进行拼接，算是对 transform 的各种用法的合集：

 
 
 
 
    
  
  
  
  
  1. div::before, 
    2. 
  
  
  
  
  2. div::after { 
    3. 
  
  
  
  
  3.     content: ""; 
    4. 
  
  
  
  
  4.     position: absolute; 
    5. 
  
  
  
  
  5.     width: 200px; 
    6. 
  
  
  
  
  6.     height: 200px; 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8. div::before { 
    9. 
  
  
  
  
  9.     border-radius: 20% 20% 20% 55%; 
    10. 
  
  
  
  
  10.     transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%); 
    11. 
  
  
  
  
  11.     background: red; 
    12. 
  
  
  
  
  12. } 
    13. 
  
  
  
  
  13. div::after { 
    14. 
  
  
  
  
  14.     border-radius: 20% 20% 55% 20%; 
    15. 
  
  
  
  
  15.     background: blue; 
    16. 
  
  
  
  
  16.     transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%); 
    17. 
  
  
  
  
  17. } 
    18.

为了方便理解，制作了一个简单的变换动画：

本质就是实现了这样一个图形：

最后，给父元素添加一个 overflow: hidden 并且去掉父元素的 border 即可得到一个圆角三角形：

由于这两个元素重叠空间的特殊结构，此时，给两个伪元素添加同一个渐变色，会完美的叠加在一起：

 
 
 
 
    
  
  
  
  
  1. div::before, 
    2. 
  
  
  
  
  2. div::after, { 
    3. 
  
  
  
  
  3.     background: linear-gradient(#0f0, #03a9f4); 
    4. 
  
  
  
  
  4. } 
    5.

最终得到一个渐变圆角三角形：

上述各个图形的完整代码，你可以戳这里：CodePen Demo -- A triangle with rounded and gradient background[5]

最后

本文介绍了几种在 CSS 中实现带圆角三角形的方式，虽然部分有些繁琐，但是也体现了 CSS ”有趣且折磨人“ 的一面，具体应用的时候，还是要思考一下，对是否使用上述方式进行取舍，有的时候，切图也许是更好的方案。

参考资料

[1]《老生常谈之 CSS 实现三角形》:

https://juejin.cn/post/6950081305560219679

[2]CodePen Demo -- 使用 SVG 实现带圆角的三角形: https://codepen.io/Chokcoco/pen/eYWZvKo

[3]CodePen Demo -- A triangle with rounded:

https://codepen.io/Chokcoco/pen/vYmLVZr

[4]How to make 3-corner-rounded triangle in CSS:

https://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css

[5]CodePen Demo -- A triangle with rounded and gradient background:

https://codepen.io/Chokcoco/pen/LYyGRpV

[6]Github -- iCSS: https://github.com/chokcoco/iCSS

本文名称：CSS奇思妙想|巧妙的实现带圆角的三角形
文章起源：http://www.shufengxianlan.com/qtweb/news31/441681.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

软件开发知识

分类信息网站

成都小程序开发　　 　企业网站设计　　 　成都网站制作　　 　达州做网站　　 　宜宾网站设计　　 　中国电信成都枢纽中心　　 　雨棚定制　　 　成都app软件开发　　 　成都做网站　　 　南部网站建设　　 　成都网站推广　　 　域名ssl证书　　 　香港四川國際商會　　 　成都小程序开发　　 　自贡主机托管　　 　成都网站推广　　 　成都多线机房　　 　盐亭做网站　　 　航龙航空　　 　广安网站建设