核心原理是利用CSS边框交界处的45°斜角渲染机制：当元素宽高为0时，四边border在中心交汇，设单边有色、其余三边transparent，即可“挤”出方向明确的三角形；大小由border-width控制，方向由有色边决定。
用 border 实现三角形的原理是什么
核心在于利用 CSS 边框交界处的斜角渲染机制：border 不是简单“描边”，而是以 45° 斜线连接相邻两边。当元素宽高为 0，只设置某一个方向的 border（比如 border-bottom），其余三边设为透明或 0，斜角就会显现出一个实心三角形。
常见错误是忘记清空其他三边边框，导致出现多余色块或变形；或者用了 border-color: transparent 却没配 border-style: solid（默认是 none，不生效）。
-
width和height必须为0，否则三角形会被“撑开”成梯形 - 三角形大小由对应方向的
border-width控制（如border-bottom: 20px solid red得到底边朝上的等腰直角三角形，高≈20px） - 方向由哪条边设颜色决定：上三角用
border-top，右三角用border-right，依此类推
向下箭头三角形怎么写（纯 CSS，无伪元素）
这是最常被考到的变体，本质是把底边朝下的三角形“翻转”过来——实际只需用 border-top，而非 border-bottom，因为三角形顶点朝下时，它的“底边”在上方。
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}注意：border-left 和 border-right 宽度相等且透明，才能保证三角形对称；如果只写 border-top 而漏掉左右，会变成一个向上的钝角“小帽子”，不是标准箭头。
立即学习“前端免费学习笔记（深入）”；
兼容性没问题，所有现代浏览器包括 IE8+ 都支持。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用伪元素 ::before 写右向三角形要注意什么
面试中常要求“不污染结构”，所以用 ::before 生成三角形。关键不是“能不能加”，而是“加完会不会破坏布局”。
- 必须设
content: ""，否则伪元素不渲染 - 推荐用
position: absolute定位，避免影响父容器流式布局 -
top/right等偏移值要配合父容器的position: relative才有效 - 若父容器有
overflow: hidden，三角形可能被裁剪——这是真实项目里最容易忽略的坑
示例（右向箭头）：
.icon::before {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px; /* 垂直居中，高度一半 */
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #666;
}为什么 transform: rotate(45deg) + background 不算“手写三角形”
因为这不是语义化、可维护的三角形方案。它依赖正方形背景 + 旋转，实际得到的是一个带锯齿、无法单独控制边框/阴影、缩放易失真的斜方块。
面试官想考察的是对 CSS 渲染机制的理解，不是“能画出类似形状就行”。用 transform 的方案在以下场景立刻露馅：
- 需要给三角形加
box-shadow（旋转后阴影也歪了） - 三角形要响应式缩放（
border-width可直接用rem或clamp()，而transform缩放会影响整个元素） - 需要精确控制某一条边的颜色或粗细（
border方案可单独设border-top-color，transform方案做不到）
真正难的不是写出一个三角形，是写出一个能在按钮、下拉菜单、气泡提示里稳定复用、不破布局、不伤性能的三角形 —— 那一定基于 border 技术。
