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

以后补充

相关推荐
IMPYLH4 分钟前
HTML 的 <select> 元素
前端·html
爱丶不疚8 分钟前
Electron:Module 与 Service 的职责边界与加载时序编排
前端·electron·nestjs
三十而立洋13 分钟前
深入浅出 Nginx:从核心原理到实战指南
前端·前端工程化
giszhc16 分钟前
腾讯地图瓦片接入方案:一个 Bun 代理,让 Mapbox / Leaflet / OpenLayers 通用
前端·后端
摸鱼仙人~16 分钟前
Vue 应用完整启动链路
前端·vue.js·软件工程
前端·柱子18 分钟前
Chaikin‘s Corner Cutting 算法 应用canvas绘制平滑的曲线
前端·html
爱丶不疚19 分钟前
Electron: 缓存机制有哪些?能控制的又有哪些
前端·electron·v8
计算机魔术师20 分钟前
一边喊安全一边烧钱竞赛:AI「减速」倡议背后的两副面孔
前端
右耳朵猫AI24 分钟前
Web前端周刊2026W37 | Shopify 转原生、React 编译 Rust 化、Vitest 5.0、Rslib 1.0
前端·javascript·react.js·typescript·node.js
涛涛ing30 分钟前
2026年,这5个JS新趋势正在悄悄改写前端
前端