三角形（html+css）

html：

1.利用transparent属性

.triangle_up{
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid red;
}

triangle_up.png

.triangle_left{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid red;
}

triangle_left.png

.triangle-top-left {
    width: 0;
    height: 0;
    border-top: 100px solid red;
        border-right: 100px solid transparent;
}

triangle-topleft.png

2.利用border属性

.box{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;
}

box.png,将其他三块换成白色即可