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

以后补充

相关推荐
遗憾随她而去.5 分钟前
前端首屏加载时间的度量:FCP、LCP等指标的规范理解
前端
CDwenhuohuo7 分钟前
安卓app巨坑 nvue后者页面要写画笔绘制功能nvue canvas
前端·javascript·vue.js
一只小bit12 分钟前
Qt 事件:覆盖介绍、处理、各种类型及运用全详解
前端·c++·qt·cpp
人道领域27 分钟前
JavaWeb从入门到进阶(前端工程化)
前端
shughui36 分钟前
APP、Web、H5、iOS与Android的区别及关系
android·前端·ios
Amumu1213841 分钟前
React Router 6介绍
前端·react.js·前端框架
山峰哥1 小时前
SQL调优实战:让查询效率飙升10倍的降本密码
服务器·前端·数据库·sql·编辑器·深度优先
余生H1 小时前
2026 年时间记录软件对比研究:时间线与「时光流」设计的产品分化
前端·软件工程·时间管理·时间记录
风叶悠然1 小时前
vue3中数据的pinia的使用
前端·javascript·数据库
李少兄1 小时前
CSS clip-path:前端开发中的裁剪技术
前端·css