用CSS3画一个三角形

在CSS3中，我们可以使用边框技巧来创建一个三角形。这是通过设置一个元素的上、右、下边框为透明，而左边框为我们想要的颜色以及给定一定的宽度和高度来实现的。

解决方案1：

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

解决方案2：

另一种方法是使用CSS3的transform属性。我们可以将一个宽度和高度为0的元素旋转45度，然后设置背景颜色。

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

解决方案3：

使用CSS3的clip-path属性，clip-path属性使用一个几何剪裁路径来剪裁元素的可见区域。

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

解决方案4：

使用CSS3的linear-gradient属性，linear-gradient函数创建一个线性渐变的背景图像。

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

以上就是用CSS3画一个三角形的几种方法，你可以根据自己的需求选择合适的方法。