CSS实现三角形的四种方法

CSS可以通过多种方法实现三角形的效果，以下是四种主要的方法：

1. 使用边框（Border）
2. 使用伪元素（::before 或 ::after）
3. 使用线性渐变（Linear Gradient）
4. 使用旋转（Rotate）

以下是每种方法的示例代码：

1. 使用边框（Border）

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

2. 使用伪元素（::before 或 ::after）

.triangle-before {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
}
 
.triangle-before::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid black;
}

3. 使用线性渐变（Linear Gradient）

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

4. 使用旋转（Rotate）

.triangle-rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

以上代码可以直接应用于HTML元素，例如：

<div class="triangle-border"></div>
<div class="triangle-before"></div>
<div class="triangle-gradient"></div>
<div class="triangle-rotate"></div>