用 border 实现纯 css 三角形最直接：将元素宽高设为 0，仅保留指向方向对边的有色 border，其余三边设为 transparent；方向由哪边有颜色决定，如向下三角形需设 border-top，而非 border-bottom。
用 border 实现纯 CSS 三角形最直接
浏览器渲染 border 时，相邻两边的交界处会自然斜切，利用这个特性，把元素宽高设为 0，只留一个方向的 border，其余设为透明，就能“挤出”三角形。
常见错误是忘了清空其他三边，或者误设了 border-color 顺序导致方向错乱。比如想画向下的三角形，却给 border-top 上了色，结果三角朝上。
- 只保留需要指向方向的对边 border（如向下三角 → 设
border-top） - 其余三边必须设为
border: 0 solid transparent或明确写成border-left: 0; border-right: 0; border-bottom: 0; -
border-color四值顺序是上右下左，单值则四边同色；透明边一定要用transparent，别用none（none不占空间）
div.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}
三角形方向控制靠 border 配置组合
方向不是靠 transform 或 rotate 硬转，而是由哪几条 border 被赋予颜色、哪几条设为透明决定的。每种方向对应一组固定搭配，改错一个值就翻车。
比如向右三角形：靠 border-top 和 border-bottom 的斜切交汇形成尖角，所以必须同时设这两边颜色，再把 border-left 设为实色——这时候左右宽度差会决定三角是否等腰，但通常设相等更可控。
立即学习“前端免费学习笔记（深入）”；
- 向上：
border-bottom有色，其余三边透明 - 向下：
border-top有色，其余三边透明 - 向左：
border-right有色，border-top/bottom同色且等宽，透明 - 向右：
border-left有色，border-top/bottom同色且等宽，透明
用 clip-path 做响应式三角形更灵活
border 方案本质是 hack，三角大小强依赖 border 宽度，缩放时容易糊或失真；clip-path 用坐标定义形状，支持百分比和视口单位，更适合适配不同屏幕。
但注意 Safari 旧版本（clip-path 的 polygon() 支持不全，如果要兼容 iOS 14 及更早系统，得加降级方案。
- 基础写法：
clip-path: polygon(0 0, 100% 0, 50% 100%)（向下三角） - 想随容器缩放？把数值换成
50vw、20vh或50%等相对单位 - 务必测试
clip-path在目标设备上的渲染表现，部分安卓 WebView 对非整数坐标处理异常
伪元素 + border 是最稳妥的图标级用法
单独用 div 画三角太重，实际项目里基本都塞在 ::before 或 ::after 里，配合定位做小箭头、下拉标识、气泡尖角。
容易被忽略的是：伪元素默认是 inline，不设 content: "" 就不渲染；不设 position: absolute 就没法精准贴边；而父容器若没设 position: relative，绝对定位会脱出上下文。
- 必须写
content: "" - 推荐设
position: absolute+ 显式top/right值 - 确保父元素有
position: relative（或其它非 static 定位） - 用
transform: translate(-50%, -50%)居中时，注意它基于自身尺寸计算，border 三角无宽高，translate 仍有效
clip-path 的兼容性边界模糊，真正上线前得在真机上点开开发者工具，把元素放大十倍看边缘有没有锯齿、有没有意外溢出。 
