CSS绘制三角形的四种方法

在CSS中，我们可以使用多种方法来绘制三角形。以下是四种不同的方法：

1. 使用边框透明度

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

2. 使用伪元素

.triangle {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
}
 
.triangle:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

3. 使用CSS3的transform: rotate()

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  transform: rotate(180deg);
}

4. 使用SVG

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

以上四种方法都可以用来绘制三角形，你可以根据实际需求选择合适的方法。