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

以后补充

相关推荐
窗边的anini4 分钟前
那个因为 vibecoding 差点搞砸约会的女孩,被 TRAE SOLO 救了
前端·人工智能·程序员
用户713874229006 分钟前
OAuth 2.0 client_id深度解析:从规范到安全实践
前端
ZC跨境爬虫12 分钟前
跟着 MDN 学CSS day_8:(盒模型完全解)
前端·javascript·css·ui·交互
Cache技术分享12 分钟前
415. Java 文件操作基础 - 精准读取压缩诗集:从二进制文件中高效提取指定十四行诗
前端·后端
光影少年13 分钟前
react自定义Hook 写法、规则(只能在组件/自定义Hook内调用)
前端·react.js·掘金·金石计划
风骏时光牛马25 分钟前
C语言核心高频问题与代码实战梳理
前端
葬送的代码人生33 分钟前
别再「Ctrl+C/V」了!Git 开发必备技能,10 分钟告别单机码农
前端·github·代码规范
xuankuxiaoyao34 分钟前
vue.js 设计与开发 ---路由
前端·javascript·vue.js
ZC跨境爬虫37 分钟前
跟着 MDN 学CSS day_6:(伪类和伪元素详解)
前端·javascript·css·数据库·ui·html
idcu38 分钟前
Lyt.js + Vite 快速开发指南
前端·typescript