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

以后补充

相关推荐
kyriewen13 小时前
白宫直接给 OpenAI 下了限制令,GPT-5.6 不能随便放出来了
前端·javascript·面试
PedroQue9914 小时前
Vite插件v0.2.6:架构优化与自动化升级
前端·vite
threerocks15 小时前
什么?我连 A2A、MCP 都没学会,现在又来了 AG-UI、A2UI.
前端·aigc·ai编程
牛奶16 小时前
如何自己写一个浏览器插件?
前端·chrome·浏览器
亿元程序员17 小时前
为什么Cocos都4.0了还有人用2.x?
前端
MomentYY17 小时前
AI 到底是“懂”,还是在“猜”?
前端·人工智能·ai编程
鹏毓网络科技17 小时前
Cursor Rules 文件配置实战:3 个隐藏参数让我每月少写 40% 样板代码
前端·github
没烦恼30117 小时前
无痕模式下 HTTP\-First 拦截引发的“页面刷新”误判
前端
文心快码BaiduComate17 小时前
从个人提效到组织提效:Comate辅助构建自我进化的AI研发系统
前端·程序员
hunterandroid18 小时前
Compose 状态管理:remember、rememberSaveable 与状态提升
前端