方案一:全兼容的SVG方案
想要生成一个带圆角的三角形,代码量最少、最好的方式是使用SVG生成。
使用SVG的多边形标签<polygon>生成一个三边形,使用SVG的stroke-linejoin="round"生成连接处的圆角。
代码量非常少,核心代码如下:
<svgwidth="250"height="250"viewBox="-50-50300300">
<polygonclass="triangle"stroke-linejoin="round"points="100,00,200200,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:50pxauto;
}
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>
|