您正在使用 IPV4 [18.209.63.120] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
css圆角三角形的实现代码
内容摘要: 方案一:全兼容的SVG方案想要生成一个带圆角的三角形,代码量最少、最好的方式是使用SVG生成。使用SVG的多边形标签polygon生成一个三边形,使用SVG的stroke-linejoin='round'生成连接处的圆角。代码量非常少,核心代码如下:svgwidth='250'height='250'viewBox='-50-50300300'polygon......
方案一:全兼容的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>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:设为首页与添加收藏夹代码

 

下一篇:CSS实现多层嵌套列表自动编号的示例代码

发布日期:2023/2/27
手机扫二维码直达本页
发布时间:14:44:28
点  击:7
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....