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);
}

以后补充

相关推荐
梦想很大很大5 分钟前
重新思考 Workrun:AI 时代,我们还需要手动编排 Workflow 吗?
前端·人工智能·后端
小羊没烦恼!11 分钟前
深入浅出SQL Server中的死锁
java·开发语言·前端·数据库·后端·spring·c#
Frag0ut18 分钟前
Chrome DevTools 2026进阶:AI辅助调试与性能诊断原生实战指南
前端·人工智能·chrome devtools·ai调试·lighthouse性能分析·内存泄漏诊断·css容器查询
ai工具集合29 分钟前
前端项目图标管理实战:成套图标集的选型、规范与 SVG 落地方案
前端
এ慕ོ冬℘゜36 分钟前
es6理论总结
前端·javascript·es6
Java后端的Ai之路1 小时前
前端框架Vue-07_原生的Vue.js
前端·vue.js·前端框架
帆张芳显1 小时前
前端表格公式能力新选择|智表 ZCell 公式引擎深度剖析
前端·excel·canva可画·excel插件
清水迎朝阳1 小时前
Edge 在线语音 403 问题修复
前端·edge
一碗白开水一1 小时前
Day 5 · 弹性 | 微观
java·前端·数据库
Lsx_1 小时前
微信支付接入全流程:JSAPI支付、小程序支付与H5支付
前端·javascript·全栈