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

以后补充

相关推荐
JarvanMo1 分钟前
理解 Flutter 中的 runApp() 与异步初始化
前端
掘金安东尼1 分钟前
🧭 前端周刊第442期(24–30 Nov 2025)
前端
h***8563 分钟前
Rust在Web中的前端开发
开发语言·前端·rust
深色風信子6 分钟前
Vue 富文本编辑器
前端·javascript·vue.js·wangeditor·vue 富文本·wangeditor-text·前端富文本
xiaobangsky7 分钟前
前端安全防护指南(三)反射型XSS
前端·安全·xss
咖啡の猫9 分钟前
Python顺序结构
java·前端·python
conkl23 分钟前
梅森旋转算法深度解析:构建更健壮的前端请求体系
前端·算法·状态模式
z***39621 小时前
Plugin ‘org.springframework.bootspring-boot-maven-plugin‘ not found(已解决)
java·前端·maven
e***58231 小时前
Nginx 配置前端后端服务
运维·前端·nginx
小奶包他干奶奶1 小时前
Webpack学习——Plugin(插件)
前端·学习·webpack