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

以后补充

相关推荐
框架图9 分钟前
Html语法
前端·html
深耕AI23 分钟前
【wordpress系列教程】07 网站迁移与备份
运维·服务器·前端·数据库
joan_851 小时前
input禁止自动填充
前端·elementui·vue
林间风雨1 小时前
layui 2.9.16 版本,根据字段字数最大数,表格自适应字段宽度
前端·javascript·layui
木子啊1 小时前
HTML防窥技巧:让源码难以偷窥
前端·html·查看源码·禁止查看源码
梦6502 小时前
前端路由守卫:掌控页面跳转的 “守门人”
前端
jiayong232 小时前
前端性能优化系列(二):请求优化策略
前端·性能优化
鄭郑2 小时前
【Playwright 学习笔记 03】CSS选择器 定位方法
css·笔记·学习·playwright
H_ZMY2 小时前
前端实现 HTTPS 强制跳转与移动端域名自动适配
前端·网络协议·https