css实现三角形叠加

CSS可以很容易实现三角形的效果，并且可以实现多个三角形的叠加，非常实用。下面就来介绍如何用CSS实现三角形的叠加。

.triangle {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #f00;
    position: relative;
}
 
. triangle:after {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 60px solid #0f0;
}
 
.triangle:before {
    content: "";
    position: absolute;
    top: -60px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 90px solid #00f;
}

上面的代码中，我们定义了三个类，分别用于显示三个三角形。其中，.triangle是最底层的三角形，使用红色的背景色，.triangle:after和.triangle:before用于显示上层的两个三角形，分别使用绿色和蓝色的背景色。

需要注意的是，我们使用了position: relative;和position: absolute;来定位元素的位置。在代码中，我们设置了三角形的宽度和高度均为0，而是通过设置边框的大小和颜色来实现三角形的绘制。

通过调整border-left、border-right和border-bottom的大小和颜色，我们可以实现各种形状的三角形，并且可以非常方便地实现多个三角形的叠加效果。