CSS三角形原理是利用0×0元素的border斜角渲染：三边设transparent、一边设实色，浏览器将交点绘为等腰直角三角形；border-width控制大小，transparent确保无冗余边框，兼容IE8+但不支持圆角和阴影。
用 border 实现三角形的原理是什么
CSS 三角形本质是利用元素 border 的斜角渲染特性：当一个块级元素宽高为 0，仅设置某一边的 border（如 border-bottom），其余三边设为透明且有宽度时，浏览器会把四条边的交汇处渲染成一个等腰直角三角形。
关键点在于：border-color 必须包含至少一个透明色（transparent），且非透明边决定三角形朝向和颜色；border-width 控制大小，三边宽度不等时三角形会变形（比如只设 border-bottom: 20px solid red，其他三边为 transparent，就得到底边朝下的红色三角形）。
常见错误现象：div 看不见、三角形歪斜、出现多余边框线——多数是因为没清空其他三边的 border-width，或用了 rgba(0,0,0,0) 替代 transparent（部分旧版 Safari 不兼容）。
生成不同方向三角形的 border 组合口诀
记住四个基础方向的写法，其余组合可推导。所有示例基于 width: 0; height: 0;：
立即学习“前端免费学习笔记（深入）”；
- 向上：
border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #333; - 向下：
border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; - 向左：
border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #333; - 向右：
border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #333;
注意：border-width 值越大，三角形底边越长；若要等边效果（视觉上更稳），三个参与的 border-width 应相等。但严格数学等边需配合 transform: rotate()，纯 border 只能做等腰直角。
用 CSS 变量 + input 实现实时三角形生成器
核心是把方向、大小、颜色做成可交互参数，用 :root 或内联 style 动态注入。避免 JS 操作 DOM 样式，优先用 CSS 自定义属性驱动：
<input type="range" id="size" min="5" max="40" value="15">
<select id="dir"><option value="up">↑ 上</option><option value="down">↓ 下</option></select>
<div id="triangle" style="--size:15px; --dir:up; --color:#2563eb;"></div>
#triangle {
width: 0; height: 0;
--size: 15px;
--color: #2563eb;
background: none;
}
#triangle[style*="up"] {
border-left: var(--size) solid transparent;
border-right: var(--size) solid transparent;
border-bottom: var(--size) solid var(--color);
}
#triangle[style*="down"] {
border-left: var(--size) solid transparent;
border-right: var(--size) solid transparent;
border-top: var(--size) solid var(--color);
}
实际使用中要注意：input[type="range"] 改变后需同步更新 style 属性（JS 一行即可：el.style.setProperty('--size', v + 'px')）；select 切换方向时建议用 class 控制而非反复改 style，避免属性冲突；移动端 range 滑动可能触发多次，加个 debounce 更稳妥。
border 三角形的兼容性与替代方案边界
IE8+、所有现代浏览器都支持 border 三角形，但有两个硬限制容易被忽略：
- 无法实现带圆角的三角形（
border-radius对0×0元素无效） - 无法做阴影（
box-shadow不作用于 border 渲染的几何体，只能套一层父容器） - 不能用
clip-path精确裁切（因为本身不是真实形状，只是视觉错觉）
如果需要圆角、阴影、旋转动画不撕裂、或响应式缩放保形，应该切换到 SVG：<svg viewbox="0 0 20 20"><polygon points="10,0 0,20 20,20" fill="#3b82f6"></polygon></svg>。SVG 可直接用 CSS 变量控制 points，也支持 filter 和 transform，复杂度上升但可控性翻倍。
