如何用CSS制作背景正/倒三角形？无需clip-path的实现方法

阿华AIGC实验室

2026-5-14

不用clip-path制作正/倒三角形的方法（避免遮挡tooltip）

哈哈，这个clip-path遮挡tooltip的坑我也踩过！确实，clip-path会直接裁剪元素的整个渲染区域，哪怕是关联的tooltip（比如title属性或者自定义的悬浮提示）也会被一起裁掉，太头疼了。不过没关系，我们可以用CSS border的经典技巧来做三角形，完全不会有这个问题，而且实现起来超简单：

核心原理

当一个元素的width和height设为0时，它的四个边框会拼接成四个等腰三角形。我们只需要把其中三个边框设为透明，剩下的一个就会显示成我们想要的三角形，而且这个方法不会对元素做任何裁剪，tooltip可以正常显示。

1. 向下的正三角形（和你clip-path效果一致）

就是你之前做的那种顶点在上、底边在下的三角：

.triangle-down {
  width: 0;
  height: 0;
  /* 左右边框透明，宽度决定三角的半宽 */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  /* 上边框设为你要的颜色，高度决定三角的高度 */
  border-top: 16px solid red;
  cursor: pointer;
}

调整border-left/right的宽度可以改变三角的宽度，调整border-top的高度可以改变三角的高度，灵活度拉满。

2. 向上的倒三角形

顶点在下、底边在上的三角：

.triangle-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  /* 把上边框换成下边框即可 */
  border-bottom: 16px solid blue;
  cursor: pointer;
}

进阶：用伪元素做装饰三角

如果这个三角是作为其他元素的装饰（比如tooltip的小尾巴），用伪元素::before/::after更合适，不用额外加HTML标签：

/* 示例：给按钮加一个向下的三角尾巴 */
.btn-with-triangle {
  position: relative;
  padding: 10px 20px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-with-triangle::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #2563eb;
}