时间:2023-03-06来源:系统城装机大师作者:佚名
想要生成一个带圆角的三角形,代码量最少、最好的方式是使用 SVG 生成。
使用 SVG 的 多边形标签 < polygon > 生成一个三边形,使用 SVG 的 stroke-linejoin="round" 生成连接处的圆角。
代码量非常少,核心代码如下:
1 2 3 4 5 6 7 8 |
< 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。
可以用正方形变成菱形,然后加圆角
1 2 3 4 5 6 |
div { width : 10em ; height : 10em ; transform: rotate( -60 deg) skewX( -30 deg) scale( 1 , 0.866 ); border-top-right-radius: 30% ; } |
拼接 3 个带圆角的菱形
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
< 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中,可以看到效果!
本质就是实现一个贝壳形状,然后通过旋转,伪类来实现,贝壳形状做个渐变就可以了。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
< 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中,就可以看到效果了!
本文列举了实现圆角三角形的方案,具体项目中用到需要动态的化,还需要特殊对待。
2023-03-06
纯CSS实现具有渐变和圆角的彩色边框2023-03-06
CSS 弹性布局Flex详细讲解(Flex 属性详解、场景分析)2023-03-06
基于css实现炫酷按钮动画效果案例代码当我们想在图片上面放置一些文字内容时,发现不管怎么放置,要么就是图片影响到文字的观感,要么就是文字挡住图片的细节,那么怎么可以既看到图片的细节又可以看到对图片的文字描述呢?下面一起来看看吧。...
2023-03-06
CSS使用SVG实现动态分布的圆环发散路径动画,第一时间看到这个需求想到的就是 SVG 或者 Canvas,但是由于开发时可能还需要插入其他元素,所以这里还是希望通过 纯 DOM + CSS 或者 SVG 的方式来实现,需要的朋友可以参考下...
2022-12-06