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

以后补充

相关推荐
CIO_Alliance3 分钟前
AI微调系列(1)| 全量微调、LoRA、QLoRA 三种方案怎么选
前端·人工智能·神经网络·机器学习·embedding·企业ai转型
hanbo17C24 分钟前
企业官网能不能看出公司实力?选建站公司前,先看这6条硬标准
运维·服务器·前端
zzzll111114 分钟前
LLM 学习第 24 课:Agent Harness
前端·人工智能·学习
Bmob后端云15 分钟前
Bmob后端云实战|Python实现SSE流式输出,给备忘录AI加上打字机效果
前端·github
nunumaymax20 分钟前
【第九章-React Router 6】
前端·react.js
少冰21 分钟前
前端埋点如何落地:从事件设计到上线验收
前端·数据分析·数据可视化
toooooop821 分钟前
thinkphp查询数据表最后的自增id
前端·javascript·数据库
晚安日记wanna26 分钟前
简历写精通浏览器原理一问 URL 到渲染直接哑火...
前端·面试
晚安日记wanna30 分钟前
四年前端被问 Code Review90人只看得懂空格和命名
前端·面试
IPdodo_35 分钟前
curl 如何测试代理 IP?HTTP、SOCKS5 与认证参数示例
前端·网络·python·https·网络调试