纯css实现三角形书写

html代码

css代码

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid #ff7f50;
    border-right: 50px solid #436eee;
    text-align: center;
}

效果

image.jpeg

将其他三边设置为透明即可

.test-border { 
    width: 0;
    height: 0;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid transparent;
    border-top: 50px solid transparent;
    border-right: 50px solid transparent;
}

image.jpeg