[分享]css做下边三角形

通过CSS可以轻松实现三角形的效果，可以用伪元素after和before来实现。

//画等边三角形
.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

//使用伪元素before和after画三角形
.triangle:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

.triangle:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
} 

其中，before伪元素是作为三角形的下部分，而after伪元素则是作为三角形的上部分。需要注意的是，需要给after伪元素加上绝对定位，否则即使top和bottom都设置为0也无法正常显示。

通过CSS，你可以快速地实现需要的三角形样式，方便美观。同时，也可以根据不同的需要和场景进行深度定制，更好地展现出你所需要的效果。