CSS 画三角形的原理？

⚡ 速记答案（30 秒）

利用 border 特性：元素宽高为 0，设置四边边框，只保留一边有颜色其他透明，就形成三角形。

📖 详细讲解

标准面试回答（推荐记住）

CSS 画三角形利用的是 border 的特性。当元素宽高都为 0 时，四个边框会交汇成四个三角形。我们只需要把其中三个边框设为透明，保留一个有颜色，就能得到一个三角形。方向由有颜色的那个边框决定：border-bottom 有颜色就是向上的三角形，border-left 有颜色就是向右的三角形，以此类推。

✅ 面试要点

•宽高为 0，边框交汇
•透明三边，保留一边
•方向由有色边框决定

💻 代码示例

CSS 三角形

<style>
/* 向上三角形 */
.triangle-up {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-bottom-color: #3b82f6;
}

/* 向右三角形 */
.triangle-right {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-left-color: #3b82f6;
}

/* 等边三角形 */
.triangle-equilateral {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 34px solid #3b82f6;
}
</style>

<div class="triangle-up"></div>

🎨 效果预览