利用CSS绘制三角形的6种技巧「分享」

1. 利用border属性绘制三角形

使用CSS的border属性可以实现绘制三角形的效果。我们可以将元素的宽高设为0，然后设置对应的border属性即可。

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #f00;
  border-right: 50px solid transparent;
}

上面的代码将绘制一个红色的三角形，高度为50px，宽度为50px。

注意：这种方法只适合绘制等边三角形或等腰三角形。如果需要绘制其他形状的三角形，需要使用其他方法。

2. 使用伪元素绘制三角形

2.1 使用:before或:after伪元素

通过在元素内部添加:before或:after伪元素，设置宽高和边框，可以实现绘制三角形的效果。

.triangle::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #f00;
}

上面的代码将绘制一个红色的等腰三角形，高度为50px，底边长为100px。

2.2 使用两个伪元素

通过使用两个伪元素，一个绘制上半部分，一个绘制下半部分，可以实现绘制任意形状的三角形。

.triangle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #f00;
}
.triangle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid #f00;
}

上面的代码将绘制一个红色的三角形，高度为100px，底边长为100px。

3. 利用transform属性绘制三角形

使用CSS的transform属性可以旋转元素，我们可以先绘制一个矩形，然后将其旋转45度，再利用裁剪功能只显示一个角，从而绘制出三角形。

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

上面的代码将绘制一个红色的等边三角形，高度为50px，底边长为50px。

4. 利用SVG绘制三角形

使用SVG可以绘制出各种复杂形状的图形，包括三角形。

.triangle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23f00' points='50 0 100 100 0 100'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

上面的代码将绘制一个红色的等腰三角形，高度为100px，底边长为100px。

5. 利用CSS的path函数绘制三角形

使用CSS的path函数可以绘制各种复杂形状的图形，包括三角形。需要注意的是，需要设置元素的宽高和viewBox属性。

.triangle {
  width: 100px;
  height: 100px;
  background-color: #f00;
  clip-path: path("M 50,0 L 100,100 L 0,100 Z");
  -webkit-clip-path: path("M 50,0 L 100,100 L 0,100 Z");
}

上面的代码将绘制一个红色的等腰三角形，高度为100px，底边长为100px。

6. 利用CSS的gradients函数绘制三角形

使用CSS的gradients函数可以绘制出各种渐变效果的图形，包括三角形。

.triangle {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-color: #f00 transparent transparent transparent;
}

上面的代码将绘制一个红色的等腰三角形，高度为50px，底边长为100px。