CSS 三角形生成器
用纯 CSS 边框技巧生成三角形：支持上/下/左/右与四个斜角方向、等边三角形（高 = 宽 × √3 / 2）、双层边框三角形，实时预览并输出 CSS 与 HTML。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
方向
实际高度：103.92px
颜色与边框
预览
按 1:1 像素显示，可直接比对尺寸
CSS
.triangle {
position: relative;
display: inline-block;
width: 120px;
height: 103.92px;
}
.triangle__fill {
position: absolute;
top: 0px;
left: 0px;
width: 0;
height: 0;
border-right: 60px solid transparent;
border-bottom: 103.92px solid #3B82F6;
border-left: 60px solid transparent;
}HTML
<div class="triangle"> <div class="triangle__fill"></div> </div>
这个工具能做什么
- 做提示气泡、下拉菜单箭头、面包屑分隔符时，用纯 CSS 边框三角形代替图片或 SVG，不用额外发请求。
- 八个方向一次看全：上下左右加四个斜角，想用哪个方向直接取对应的一份 CSS。
- 需要等边三角形时勾选等边，高度自动按 宽 × √3 / 2 算出来，不用记这个系数。
- 要「带描边」的三角形时开启双层模式，外层画边框色、内层内缩后画填充色，省掉自己推导内缩量的麻烦。
示例
输入
方向「上」、宽 80px、高 60px、填充色 #6366F1、不带边框
输出
.triangle {
position: relative;
display: inline-block;
width: 80px;
height: 60px;
}
.triangle__fill {
position: absolute;
top: 0px;
left: 0px;
width: 0;
height: 0;
border-right: 40px solid transparent;
border-bottom: 60px solid #6366F1;
border-left: 40px solid transparent;
}左右两条透明边框各取底边的一半（40px），指向靠 border-bottom 上色；HTML 就是 <div class="triangle"><div class="triangle__fill"></div></div>。
常见问题
等边三角形的高度是怎么算的？
高 = 宽 × √3 ÷ 2，保留两位小数。宽 120px 时输出 103.92px。斜角方向（左上、右上这类直角在角落的三角形）做不成等边，勾选等边不会生效，仍按你填的高度输出。
带边框的三角形是怎么叠出来的？
用两层绝对定位的三角形：外层用边框色画整个三角形，内层尺寸内缩后再用填充色画一次，视觉上就只剩一圈边框。斜角方向的收缩量按 45° 法线距离折算成 √2 倍。
为什么边框宽度不能太大？
内层要同时向内收缩底边和高，如果边框宽度超过尺寸承受范围，内层会算出小于等于 0 的底边或高度，工具会直接报「边框太宽」而不是输出一个看不见的三角形。
颜色可以写什么格式？
支持 #RGB / #RGBA / #RRGGBB / #RRGGBBAA、rgb()/rgba()/hsl()/hsla() 以及少量颜色关键字（black、white、red、transparent 等）。工具只做白名单校验，避免把任意字符串拼进 CSS。
和 clip-path 画三角形有什么区别？
边框三角形兼容性最好，老浏览器也能用，而且天然带「尖角抗锯齿」的观感；clip-path 更灵活，能画任意多边形，但在某些旧版浏览器上需要前缀。只要三角形就够用时，边框方案最省事。
关键词：css trianglecss 三角形triangle generator三角形生成器border trick边框三角形箭头arrowequilateral triangle等边三角形bordered triangle带边框三角形