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

以后补充

相关推荐
猪八宅百炼成仙9 分钟前
解决 el-date-picker type:daterange 在 layout 布局中的宽度问题
前端·element
小贺要学前端33 分钟前
ES6 还没用明白,JavaScript 已经快到 ES2026 了
前端·javascript·es6
Amumu1213838 分钟前
JS:ES6~ES11基础语法(二)
开发语言·前端·javascript
Amumu1213840 分钟前
Js:ES6~ES11基础语法(一)
开发语言·前端·javascript
英俊潇洒美少年1 小时前
#React 16/17/18/19 超精简速记版(面试前5分钟背完)
前端·react.js·面试
lightqjx1 小时前
【前端】前端学习一之HTML从入门到精通
前端·学习·html
Joyee6911 小时前
RN 的事件调度 RuntimeScheduler
前端·react native
sensen_kiss2 小时前
CAN302 电子商务技术 Pt.1 Web技术导论
前端·网络·学习
ProgramHan2 小时前
十大排行榜——前端语言及要介绍
前端
氢灵子2 小时前
Fixed 定位的失效问题
前端·javascript·css