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

以后补充

相关推荐
用户6158139695167 小时前
Elpis: 基于vue3+webpack5+nodejs搭建一个完整项目
前端
90后的晨仔7 小时前
S C:\WINDOWS\system32> pnpm i -g openclaw@latest pnpm : 无法加载文件 C:\xx\A
前端
蜡台7 小时前
Node 版本管理器NVM 安装配置和使用
前端·javascript·vue.js·node·nvm
狂奔蜗牛飙车7 小时前
Day3:HTML5 基础标签:h1-h6、p、hr、br、a、img
前端·html·html5·html常用标签的使用方法
木斯佳8 小时前
前端八股文面经大全:腾讯前端暑期提前批一、二、三面面经(下)(2026-03-04)·面经深度解析
前端
bluceli8 小时前
前端国际化(i18n)实战指南:构建多语言应用的完整方案
前端
hh随便起个名8 小时前
React组件通信
前端·react.js·前端框架
前端 贾公子8 小时前
vite-plugin-eruda-pro 在vite中使用eruda
前端
Jackson__8 小时前
Agent Skill 和 Rules 有什么区别?
前端·agent·ai编程
不要卷鸿蒙啊8 小时前
【鸿蒙开发】HMRouter一款和好用的管理路由三方工具
前端·harmonyos