CSS多种方法绘制三角形

之前有人面试问我用css绘制三角形我只会第一种边框法，今天小哆啦给大家总结了一波

1. 边框法：

使用一个具有透明边框的元素，并隐藏不需要的边框，以形成一个三角形。

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ff0000; /* 可以设置为任何颜色 */
}

2. 伪元素法：

使用:before或:after伪元素来创建三角形。

.triangle {
  position: relative;
  width: 0;
  height: 0;
}
.triangle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #00ff00; /* 可以设置为任何颜色 */
}

3. CSS3 clip-path：

使用clip-path属性可以在元素上创建裁剪路径，可以通过它来创建三角形。

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #0000ff; /* 可以设置为任何颜色 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

4. CSS3 transform：

使用transform属性进行旋转，可以将一个矩形元素变成三角形。

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ff00ff; /* 可以设置为任何颜色 */
  transform: rotate(180deg);
}

选择其中一种方法取决于你的具体需求和偏好。这些方法都可以用来创建不同形状和大小的三角形。