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

以后补充

相关推荐
汉堡go4 分钟前
python_chapter6
前端·数据库·python
wusp199410 分钟前
v-model 和 :value 的深度解析
前端·javascript·vue.js
Code知行合壹16 分钟前
Vue项目中SVG图标
前端·vue.js
SJLoveIT19 分钟前
【安全研发】CSRF (跨站请求伪造) 深度复盘与防御体系
前端·安全·csrf
小二·29 分钟前
Python Web 开发进阶实战:数字孪生平台 —— 在 Flask + Vue 中构建实时物理世界镜像
前端·vue.js·python
CHU72903530 分钟前
安心陪伴,便捷就医:陪诊代办小程序的温暖设计
前端·小程序·php
ashcn200138 分钟前
websocket测试通信
前端·javascript·websocket
weixin_4046793140 分钟前
edge alt tab怎么关
前端·edge
CHU7290351 小时前
线上扭蛋机拆盒小程序前端功能版块解析
前端·小程序·php
卿着飞翔1 小时前
Vue使用yarn进行管理
前端·javascript·vue.js