CSS用border画三角形需设width和height为0，仅保留单边有色边框，其余transparent，大小由border-width控制，伪元素可避免额外标签，注意background-clip修复透明边框遮挡。
div 本身不支持直接画三角形，但用 CSS 的 border 属性配合零宽高，是最快、最兼容、无需额外标签的方案。别折腾 canvas 或 SVG——除非你真需要旋转动画或点击交互。
必须把 width 和 height 都设为 0
这是 border 三角形生效的前提。只要 width 或 height 任一非零，四个边框就会“撑开”，变成带角的矩形，而不是纯粹的三角形。
- 常见错误：只设
height: 0，忘了width: 0→ 元素仍占水平空间，三角形被拉扁或消失 - 顺带清掉干扰：加
font-size: 0和line-height: 0，避免内联内容（比如空格）意外撑开高度 - 不需要
overflow: hidden—— 宽高为 0 时，border 自然不溢出
方向由哪个 border 有色决定
三角形朝向完全取决于你保留哪一条边框的颜色，其余三条必须用 transparent（不能用 none，否则该边不参与交汇，三角形缺角）。
- 向上箭头：只留
border-bottom有色 →border-bottom: 10px solid #000 - 向下箭头：只留
border-top有色 →border-top: 10px solid #000 - 向右箭头：只留
border-left有色 →border-left: 10px solid #000 - 向左箭头：只留
border-right有色 →border-right: 10px solid #000 - 大小由对应
border-width控制：值越大，三角形底边越长、高度越高
透明边框可能遮挡背景色？用 background-clip 修复
即使设了 border-color: transparent，某些浏览器（尤其旧版 Safari）仍会把透明边框渲染成白色底，盖住下方元素。这不是 bug，而是默认 background-clip: border-box 导致背景色延伸进了边框区域。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 解决方法：加一句
background-clip: padding-box - 更彻底的做法：同时设
background-color: transparent，双重保险 - 注意：这个坑只在需要穿透显示底层内容（比如深色背景上的浅色三角）时才明显；纯白页面下通常看不出来
想少写一个 div？用伪元素 ::before 或 ::after
如果三角形只是装饰性箭头（比如下拉菜单指示符），直接挂到现有元素上更干净，不用额外 DOM 节点。
立即学习“前端免费学习笔记（深入）”；
- 向上箭头挂顶部：用
::before+position: absolute; bottom: 100% - 向右箭头挂右侧：用
::after+position: absolute; right: 0; top: 50% - 务必加
content: ""和display: block，否则伪元素不渲染 - 父元素需有
position: relative，否则绝对定位会相对于 body
border-width，或者改用 clip-path。但后者在 IE 和老安卓 WebView 里不支持——所以先跑通 border 方案，再考虑升级。 
