css如何使用linear-gradient绘制三角形

# CSS如何使用linear-gradient绘制三角形

在CSS中，`linear-gradient`通常用于创建渐变背景，但通过巧妙组合，它还能绘制出各种几何图形，包括三角形。以下是实现方法：

## 核心原理

通过叠加两个不同方向的线性渐变，利用透明色（`transparent`）和实色的交界处形成斜边。当两个斜边相交时，即可构成三角形。

## 实现步骤

### 1. 基础三角形
```css
.triangle {
  width: 100px;
  height: 100px;
  background: linear-gradient(to bottom right, 
    transparent 0%, 
    transparent 50%, 
    red 50%, 
    red 100%);
}

这会创建一个直角在左下角的等腰直角三角形。

2. 方向控制

通过调整渐变方向可改变三角形朝向：

/* 向上箭头 */
.arrow-up {
  background: linear-gradient(to bottom, 
    transparent 45%, 
    red 45%, 
    red 55%, 
    transparent 55%);
}

3. 组合多个渐变

更复杂的三角形需要叠加多个渐变：

.complex-triangle {
  background: 
    linear-gradient(to bottom left, 
      transparent 0% 50%, 
      red 50% 100%),
    linear-gradient(to bottom right, 
      transparent 0% 50%, 
      red 50% 100%);
  background-size: 50% 100%;
  background-position: left, right;
  background-repeat: no-repeat;
}

注意事项

1. 需要精确计算颜色断点位置
2. 容器需设置固定宽高比
3. 部分浏览器可能需要前缀
4. 与伪元素结合可实现更多效果

相比传统border绘制法，linear-gradient方案的优势在于： - 支持渐变填充 - 可实现更复杂的多三角形组合 - 不占用伪元素资源

这种方法在创建装饰性元素或动态背景时特别有用，但需注意浏览器兼容性（IE10+支持）。 “`