在前端开发中，使用 CSS 绘制三角形 是一个非常经典的技巧，通常用于箭头、提示符、弹窗指示等。下面给你一个详细的总结和几种实现方法：

1️⃣ 最经典：使用 border 绘制三角形

通过给一个 宽高为 0 的元素 设置不同颜色的边框，利用透明边框形成三角形。

示例代码：

/* 向下的三角形 */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

/* 向上的三角形 */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}

/* 向左的三角形 */
.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid green;
}

/* 向右的三角形 */
.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid orange;
}

✅ 优点：简单、兼容性好
❌ 缺点：只能做等腰直角三角形，调整形状有限

2️⃣ 使用 clip-path 绘制三角形

clip-path 允许裁剪元素，可以灵活地绘制任意形状，包括三角形。

示例代码：

.triangle {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
  • polygon 中的三个点定义了三角形的三个顶点。
  • 可轻松实现任意形状和方向。

✅ 优点：灵活、支持复杂形状
❌ 缺点：老旧浏览器兼容性差

3️⃣ 使用伪元素 ::before 或 ::after

可以在元素上添加装饰性的三角形，避免增加额外 HTML 元素。

示例代码：

.button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
}

.button::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #3498db;
}

✅ 优点：不增加 HTML，便于复用
❌ 缺点：需要额外的定位和样式调整

4️⃣ 使用 transform 或旋转三角形

结合 transform: rotate() 和 clip-path 或 border，可以改变三角形方向或做动画。

示例代码：

.triangle {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(180deg); /* 旋转180度形成向下的三角形 */
}

✅ 优点：可做动画或旋转效果
❌ 缺点：需要理解坐标系和旋转原理

5️⃣ SVG 绘制三角形（可选）

如果你需要更高精度或响应式三角形，SVG 是最佳选择。

示例代码：

<svg width="100" height="100">
  <polygon points="50,0 0,100 100,100" style="fill:red;"></polygon>
</svg>

✅ 优点：高精度、可缩放、可动画
❌ 缺点：需要额外的 HTML 元素

总结

方法优点缺点适用场景
border简单、兼容性好形状受限普通箭头、提示
clip-path灵活、可任意形状老浏览器兼容差动态形状、复杂 UI
伪元素不占用 HTML需要定位装饰性箭头、提示
transform可旋转、做动画需理解坐标系动态 UI
SVG高精度、可缩放需额外元素响应式三角形、复杂图形