css 制作三角形

使用 CSS 制作三角形的方法

边框法（Border Method）

通过设置元素的宽高为0，并利用边框的透明属性来创建三角形。这是最常见且兼容性最好的方法。

向上三角形

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ff0000;
}

向下三角形

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #00ff00;
}

向左三角形

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid #0000ff;
}

向右三角形

.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #ffff00;
}

旋转法（Transform Method）

通过旋转一个正方形元素来生成三角形。需要结合 overflow: hidden 和父容器限制。

.triangle-rotate {
  width: 100px;
  height: 100px;
  background: #ff00ff;
  transform: rotate(45deg);
  position: relative;
  top: -50px;
}
.parent {
  width: 100px;
  height: 50px;
  overflow: hidden;
}

裁剪路径法（Clip-Path）

使用 clip-path 属性直接定义多边形路径，适合复杂形状。但兼容性较边框法稍差。

等边三角形

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

直角三角形

.triangle-right-angle {
  width: 100px;
  height: 100px;
  background: #ff9900;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}

渐变法（Gradient Method）

通过线性渐变模拟三角形效果，适合需要渐变色的场景。

.triangle-gradient {
  width: 100px;
  height: 100px;
  background: linear-gradient(to bottom right, #ff0000 50%, transparent 50%);
}

注意事项

• 边框法 是最广泛支持的方法，但调整大小时需同步修改多个边框值。
• clip-path 适合现代浏览器，但对 IE 支持有限。
• 旋转法需依赖父容器裁剪，可能影响布局灵活性。