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

以后补充

相关推荐
lerhxx7 分钟前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
骑着蜗牛撵大象32714 分钟前
多 Agent 分治协作:MapReduce 模式下的并行扇出与结果归并
前端
用户553182973216 分钟前
Flutter iOS 热更新深入 Dart VM:读懂函数入口、解释执行与调用桥接
前端
前端snow24 分钟前
为什么大厂要用Postgres + mogodb的框架?
前端
运维有小邓128 分钟前
2026年主流AD域管理软件有哪些?
前端
Mickey同学30 分钟前
提示词注入:AI 时代的「SQL 注入」
前端
deli00733 分钟前
GROUP BY 先别想当然:我把 SQL 分组语义做成了沙盘,8 个实验 + 27 条自检全绿
前端
WayneX33 分钟前
开源 Vue 3 组件库 Morya UI:把组件、文档、AI 工具链一起做进一个包
前端·vue.js·前端框架
用户157415681653434 分钟前
页面白屏 + Invalid prop: type check failed for prop "options"?原来是 script setup 的 ref
前端
btcSteven34 分钟前
给浏览器装了个「AI 操作员」:纯聊天帮你完成任何任务
前端