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

以后补充

相关推荐
XZ-0700018 分钟前
week9-三元表达式
java·前端·python
叫我铁汁儿吧16 分钟前
Redux的原理
前端
云和数据.ChenGuang18 分钟前
name=“张三“ age=18 weight=100.3 print (name,age,weight)
java·服务器·前端
代码猎人18 分钟前
前端怎么优化兼容性
前端
Nayana20 分钟前
《Web 到 HarmonyOS》-- 进程、线程与通信:谁能通、怎么通
前端
叫我铁汁儿吧21 分钟前
JS 中的this
前端
狂潮lister27 分钟前
狂潮·元理论 | 第5篇:想为你的AI培养个性吗!哈哈哈……(6个测试,教你幻觉的正确玩法)
前端·人工智能
高晶37 分钟前
2A3 单端甲类功放从零制作全攻略:电路设计、焊接调试到煲机维护一站式指南
前端·设计模式
deli00739 分钟前
塔防游戏里怪物为什么绕远路?Canvas 实测 A* 寻路 20 波
前端
小万74239 分钟前
WHO 心理自助指南深度解析:Step-by-Step 与 Doing What Matters in Times of Stress,用循证协议重构心理韧性
前端