css用border实现三角形的原理是：当元素宽高为0时，四边透明边框与单边有色边框在交汇处按斜角渲染，形成指向该有色边对边的实色三角形；例如border-bottom设色生成向上三角形。

用 border 实现三角形的原理是什么 CSS 三角形本质是利用元素边框交界处的斜角渲染特性。当一个块级元素宽高为 0，只设置某一边框（如 border-top），其余三边设为透明且有宽度时，浏览器会把四条边框的交汇点“挤”成一个实色三角形。这不是 hack，是 CSS 规范定义的边框绘制行为。

• 必须将元素的 width 和 height 都设为 0
• 四条边框必须同时存在，但只需给目标方向的边框设颜色，其余设为 transparent
• 边框宽度决定了三角形大小；等宽边框生成等腰直角三角形
• 不支持圆角、阴影直接加在三角形上（需额外包裹）

向上/向下/向左/向右三角形怎么写 方向由哪条边框设色决定：上三角用 border-bottom，下三角用 border-top，左三角用 border-right，右三角用 border-left——记住“指向哪，就用对边着色”。

.triangle-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #333;
}
<p>.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}</p><p>.triangle-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #333;
}</p><p>.triangle-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #333;
}</p>

三角形太尖或位置偏移怎么办 常见问题基本都出在盒模型和定位上：

• 如果三角形出现在意料之外的位置，大概率是父容器没设 position: relative，而你用了 absolute 定位子元素（比如气泡箭头），此时三角形会相对于最近已定位祖先定位，不是父容器
• 三角形“太尖”其实是边框宽度不一致导致的，比如 border-top: 12px，border-left: 6px，结果得到的是钝角或斜三角，要等腰直角就得四边中三边透明值严格相等
• 想微调三角形上下左右偏移，不要改 margin（它会影响布局流），改 top/left 配合 position: absolute 更可控
• 在 Retina 屏上若出现 1px 模糊，可加 transform: translateZ(0) 强制硬件加速，或用 transform: scale(0.9999) 规避 subpixel 渲染

有没有更现代的替代方案clip-path 可以画任意三角形，语义更清晰，也支持动画和圆角：

.triangle-clip {
  width: 20px;
  height: 20px;
  background: #333;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

但它有兼容性代价：clip-path 的 path 语法在 Safari 旧版本、IE 中不支持；且无法像 border 方案那样通过调整单一边框色快速切换方向。如果项目需兼容到 iOS 12.5 或 Android 4.4，border 仍是更稳妥的选择。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

真正容易被忽略的是：border 三角形无法继承父元素的 color 或 background，每次都要硬编码颜色；而 clip-path 方案依赖背景色，也不方便主题切换。需要动态变色时，得配合 CSS 自定义属性或 JS 注入。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！