CSS实现三角形 梯形

.triangle {
    width : 0px;
    height:0px;
    border : 0px solid transparent;
    border-top: 50px solid blue;
    border-left: 50px solid seagreen;
    border-bottom:50px solid yellow;
    border-right: 50px solid saddlebrown;
}

根据盒子模型，主体的长宽为0，border就为三角形，

图片1.png

transparent为透明色，当只有borde-top的时候，其余都为透明色

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

图片2.png

当自身带有宽度 width时候是个梯形

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

图片3.png