css填充三角形

CSS中实现填充三角形的方法有很多种，比如使用伪元素:before/:after，使用border属性实现，或者使用clip-path进行裁剪。在这篇文章中，我们将介绍如何使用border属性实现填充三角形。

/* 等腰直角三角形 */
.triangle {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-color: transparent red red transparent;
}

上述代码中，我们使用了border属性来实现三角形的边框。具体实现如下：

• width和height设置为0，表示它没有宽度和高度；
• border-width设置为50px，表示三角形的边长为50px；
• border-style设置为solid，表示边框为实线；
• border-color设置为transparent red red transparent，这个设置比较有意思。其中，前面两个transparent表示顶点位置的两条边是透明的，可以看到下面背景色填充的颜色，后面两个red表示下面两条边的颜色，可以根据自己的需求进行更改。

除了等腰直角三角形之外，我们还可以实现等边三角形和其他不规则三角形。代码如下：

/* 等边三角形 */
.triangle {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-color: transparent transparent #007bff transparent;
}

/* 不规则三角形 */
.triangle {
  width: 0;
  height: 0;
  border-width: 0 50px 50px 0;
  border-style: solid;
  border-color: transparent transparent #007bff transparent;
}

对于等边三角形，我们只需要将上述代码中的红色边改为相应的颜色即可。而对于不规则三角形，我们则需要针对border-width进行更改。其中，第一条边的宽度为0，表示这条边是透明的。

通过上述方法，我们可以轻松地实现各种形状的三角形，而无需使用图片或其他麻烦的方法。同时，使用border属性实现的三角形在缩放时也不会失真，可以说是一种非常优秀的解决方案。