用 border 技巧生成纯 CSS 三角形:8 个方向、实时预览、border 与 clip-path 两种写法一键复制,浏览器本地
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
.triangle {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 70px solid #8b5cf6;
border-left: 50px solid transparent;
}零尺寸盒子 + 一条实色边框。从 IE6 到现在全浏览器都认,但盒子本身宽高为 0,里面放不了渐变或文字。
.triangle {
width: 100px;
height: 70px;
background: #8b5cf6;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}一个真实的 W×H 盒子被裁成三角形。保留盒子尺寸,能放渐变 / 图片 / 文字,动画也平滑,需要现代浏览器。
这个工具能做什么
不用图片、不用 SVG、不用任何依赖,直接生成纯 CSS 三角形。 选方向(上、下、左、右,或四个对角直角方向之一),设底边宽度、 高度和填充颜色,复制现成 CSS。工具同时给出两种写法:经典的 "border 技巧"(width:0; height:0 的盒子配一条实色边框,从 IE6 到现在全浏览器都认)和现代的 clip-path: polygon() 写法(一个 真实的 W×H 盒子被裁成三角形,保留盒子尺寸,里面能放渐变、 背景图和文字)。实时预览用的就是你即将复制的真实 border 值, 所见即所得。方向、尺寸、颜色都写进 URL,分享链接打开就是同一个 三角形;上次的设置也会本地记住。全部在浏览器里跑,不上传、 不打点。
工具细节
- 输入
- 文本 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 10 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 三角形生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
做提示框(tooltip)的尖角小尾巴
提示框需要一个小三角"尾巴"从气泡指向它描述的元素。选"下" 方向,宽度设 ~16px、高度 ~8px,颜色和提示框背景一致,复制 border CSS。用 ::after 伪元素接上,position:absolute、 left:50%、transform:translateX(-50%)、top:100%。尾巴就贴在 气泡底下指向触发元素。因为 border 写法没有盒子尺寸,它绝不会 抢走下面内容的指针事件。
做纯 CSS 的下拉 / select 箭头
原生 select 箭头各浏览器不一致,自定义下拉又得自己画指示符。 选"下",在文字颜色里设个 10px × 6px 的小三角,作为 inline-block 的 ::after 放进触发按钮里。不用图标字体、不用 SVG 请求、不用额外 HTTP 往返,它就是样式表的一部分。 展开态时配 CSS 过渡把它旋转 180°,菜单一开箭头就翻转。
画对话 / 聊天气泡的指向尖角
聊天气泡需要一侧带个尖角表示谁在说话。左对齐的收到消息,选 "左"方向让三角指回头像那边,尺寸约 12px × 16px,颜色和气泡 一致。绝对定位在气泡左边缘、纵向居中。发出(自己)那侧改成 "右"。同一个生成器输出做两份、按方向镜像,就拼出消息界面 的两边。
给丝带 / 角标做折角阴影
"角标丝带"(Sale、New、精选)常在丝带绕过卡片角的下方带一个 三角形折角,做出立体感。用"左上"这种对角方向,在丝带颜色的 深一档里画那个直角阴影三角,用 z-index 塞到丝带后面,平贴的 贴纸一下就有了布料折叠的质感。纯 CSS,没有图片资源要导出 或维护。
用 clip-path 输出给三角形填渐变
你想要一个不是纯色的装饰三角,比如填了品牌渐变的斜向分割 块。border 写法做不到,因为元素没有面。切到 clip-path 输出: 设好方向和较大尺寸(用你自己的 CSS 把宽度设成 100%),把 linear-gradient 粘到工具生成的 background 属性里,渐变就被 裁成三角形。Hero 区斜切、倾斜分割线都靠这一招。
常见踩坑
给 border 写法的三角形设了 background-color 却奇怪为什么没显示。元素是 width:0; height:0,它没有面,只有边框,背景永远不渲染。需要填充(渐变、图片、文字)就用 clip-path 输出,那是个真实盒子。
忘了颜色要上在三角形指向的"反方向"那条边上。指向上的三角是由实色的"底边"做出来的,不是顶边。如果箭头方向反了,基本就是给错了边上色,把颜色换到对面那条边即可。
把没用到的边框留成有宽度的实色透明,却指望出来一个尖角。对称等腰三角形里,两条透明侧边框必须各为底边宽度的一半;若不相等,顶点会偏离中线。本工具会帮你保持平衡,但若你手改 CSS,记得让左右侧边框相等。
隐私说明
所有计算(border 值运算、clip-path 多边形、实时预览)都是 浏览器标签页里跑的纯 JavaScript。三角形配置不会发到任何服务器, 不打点记录你生成了什么。唯一要留意的: URL 分享状态会把方向、 尺寸、颜色写进 query string(如 ?t={"direction":"up",...}), 所以你把"分享链接"粘到 Slack 或邮件时,对方服务器访问日志会 看到这些值。它们只是 CSS 数字,无害,但如果你介意,手动 复制 CSS 比分享 URL 更稳妥。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。