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

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

方案一:全兼容的 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中,就可以看到效果了!

相关推荐
到底起什么网名才能不重名5 小时前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
sunbyte6 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
码哥DFS9 小时前
Flex布局原理
前端·css·css3
长路 ㅤ   10 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
张晓~1833994812112 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
小飞悟12 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
xhload3d12 小时前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
晴殇i14 小时前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
Liudef061 天前
2048小游戏实现
javascript·css·css3
小桥风满袖1 天前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js