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

以后补充

相关推荐
不会写DN1 分钟前
Protocol Buffers(.proto)实战入门:Go 生态最常用的接口定义语言
java·前端·golang
小小小米粒5 分钟前
原生 JS:数据和视图「分离」,必须手动同步原生 JS 里,数据是数据,视图是视图,两者完全没关系
前端·javascript·vue.js
摸鱼仙人~9 分钟前
纯前端 Vue 实现共享预览链接方案
前端·javascript·vue.js
happymaker06269 分钟前
VueCli标准化工程中的组件通信操作
开发语言·前端·javascript
Yiyi_Coding11 分钟前
Proxy详解
java·前端·javascript
a11177613 分钟前
PreTeXt 开源推荐(应用demo)
前端·开源·html
摸鱼仙人~20 分钟前
前端开发中“共享预览链接”场景-企业级最简方案:Vue + 极简后端(2 接口 1 张表)
前端·javascript·vue.js
七夜zippoe30 分钟前
应用安全实践(一):常见Web漏洞(OWASP Top 10)与防护
java·前端·网络·安全·owasp
reasonsummer33 分钟前
【白板类-03-01】20260402画板01(html+希沃白板)
前端·html