css 三角形

方法一:

复制代码
<div class="triangle"></div>

css
.triangle{
	width: 8px;
    height: 8px;
    border: 8px solid #3C69EF;
    /* border-radius: 0px 2px 0 0; */  // 右上角加一点圆角
    border-block-end: 8px solid transparent;
    border-inline-start: 8px solid transparent;
}

不写 border-inline-start,是这样的效果

方法二:

css

复制代码
.triangle{
    width: 20px;
    height: 20px;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
    border: 20px solid #3C69EF;
}

方法三:

复制代码
.{
 	width: 20px;
    height: 20px;
    background: conic-gradient(from 90deg at 0 0, #3C69EF 0, #3C69EF 45deg, transparent 45.1deg);
}

以后补充

相关推荐
前端一课3 分钟前
用Agent Skill重构代码:300行缩至30行的实战教程
前端
腻害兔14 分钟前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:IM 即时通讯模块,一个被低估的「全功能聊天系统」
java·前端·vue.js·产品经理·ai编程
奎叔36 分钟前
Flutter 异常处理体系:从捕获、转换到恢复
前端
心念枕惊39 分钟前
.NET CORE 授权进阶-角色、策略与动态权限实现
java·前端·.netcore
小徐_233341 分钟前
寓言故事一则:狗猛酒酸
前端·ai编程
xiaobaoyu1 小时前
vue2+element开发中问题和解决方式
前端
KaMeidebaby1 小时前
卡梅德生物技术快报 | 核酸适配体文库测序:核酸适配体文库测序的技术原理、实验流程与数据解析
前端·网络·数据库·人工智能·算法
Hilaku2 小时前
为什么在 2026 年,MPA(多页面应用)正在悄悄复辟?
前端·javascript·程序员
幸福小宝2 小时前
eslint和prettier
前端
anyup2 小时前
终于在今天入选了 Gitee GVP,这真值得庆祝~
前端·uni-app·开源