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

以后补充

相关推荐
慧一居士7 小时前
Less功能介绍和完整使用示例
css
天道kabuto7 小时前
踩坑实录:JS Map迭代器为什么“用完即焚”?兼谈技术知识沉淀
前端
字节跳动开源7 小时前
VisActor全新图可视化开源项目:VGraph
前端·设计模式·开源
打呵欠的猫7 小时前
前端接口超时从 15s 改到动态值后,用户投诉降了 60%——AI 帮我分析出的方案
前端·ai编程
岁月宁静7 小时前
二、《从零手撸 Agent》 — 聊聊 LLM 的失忆真相
前端·python·agent
郭邯7 小时前
用纯前端实现一个代码压缩美化工具,我踩了这三个坑
前端
用户283209679377 小时前
从进程线程到 async/await:JS Event-loop事件循环机制底层解析
前端·javascript
岁月宁静7 小时前
一、《从零手撸 Agent》 我用 10 行代码跑通了第一次大模型调用(顺便踩了 4 个坑)
前端·python·agent
计算机魔术师7 小时前
Fable 5.1 来了,智能体任务成本降 45%——Anthropic 这次为何降价这么狠
前端
Csvn8 小时前
现代 CSS 新特性深度:container query、:has()、@scope 与 subgrid
前端