在 CSS 中画三角形，最常用的两种方法是使用 边框 (Border) 或 裁剪路径 (Clip-path)。

在 CSS 中，最常用的两种方法是使用 边框 (Border) 或 裁剪路径 (Clip-path)。

方法一：使用边框 (经典方法)

这是最常用的技巧。其原理是将 div 的宽高设为 0，然后通过设置不同方向的边框颜色（透明或有色）来挤压出一个三角形。

代码示例（向上三角形）：

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

<style>
.triangle-up {
  width: 0;
  height: 0;
  /* 左右边框透明，底边有色 */
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #3498db;
}
</style>

调整方向：

• 向下： 设置 border-top 有色，其他透明。
• 向左： 设置 border-right 有色，其他透明。
• 向右： 设置 border-left 有色，其他透明。

---

方法二：使用 clip-path (现代方法)

clip-path 属性允许你通过坐标点直接裁剪形状。这种方法更直观，且 div 依然可以保留其原本的宽高。

代码示例：

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

<style>
.triangle-clip {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  /* 三个点的坐标分别是：顶端中间 (50% 0%)，左下角 (0% 100%)，右下角 (100% 100%) */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>

---

总结与建议

1. Border 方法： 兼容性极好（甚至支持非常老的浏览器），但如果你需要给三角形加投影 (box-shadow) 或渐变，处理起来会比较麻烦。
2. Clip-path 方法： 代码可读性强，支持响应式布局，非常方便添加背景图片或渐变色。现代浏览器均支持，是目前的推荐做法。

如果你需要快速生成各种角度的三角形，可以搜索 "CSS Triangle Generator"，有很多在线工具可以直接导出这些代码。