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

以后补充

相关推荐
cch891817 小时前
React Hooks的支持
前端·javascript·react.js
鹏程十八少17 小时前
9. Android Shadow插件化如何解决资源冲突问题和实现tinker热修复资源(源码分析4)
android·前端·面试
蜡台18 小时前
vue.config.js 配置
前端·javascript·vue.js·webpack
qq_3813385018 小时前
微前端架构下的状态管理与通信机制深度解析:从 qiankun 源码到性能优化实战
前端·状态模式
han_18 小时前
JavaScript设计模式(六):职责链模式实现与应用
前端·javascript·设计模式
网易云音乐技术团队18 小时前
音乐应该“更好找”:我们为什么在 Agent 时代做了一个音乐 CLI
前端·人工智能
攀登的牵牛花18 小时前
2.1w Star 的 pretext 火在哪?
前端·github
散步去海边18 小时前
Pretext 初识——零 DOM 测量的文本布局引擎
前端
xw-busy-code18 小时前
npm 包管理笔记整理
前端·笔记·npm