原生CSS画三角形

步骤：

先将一个盒子的width和height都设置为0px，这一步是最关键的

画尖朝上的红色三角形

div{
    width:0px;
    height:0px;
    border-left:100px solid #fff;
    border-right:100px solid #fff;
    border-top:100px solid #fff;
    border-bottom:100px solid #f00
}

画尖朝下的红色三角形

div{
    width:0px;
    height:0px;
    border-left:100px solid #fff;
    border-right:100px solid #fff;
    border-bottom:100px solid #fff;
    border-top:100px solid #f00
}

画尖朝左的红色三角形

div{
    width:0px;
    height:0px;
    border-left:100px solid #fff;
    border-top:100px solid #fff;
    border-bottom:100px solid #fff;
    border-right:100px solid #f00
}

画尖朝右的红色三角形

div{
    width:0px;
    height:0px;
    border-right:100px solid #fff;
    border-top:100px solid #fff;
    border-bottom:100px solid #fff;
    border-left:100px solid #f00
}

画左上方的直角三角形

div{
    width:0px;
    height:0px;
    border-top:100px solid #f00;
    border-right:100px solid #fff;
    border-bottom:100px solid #fff
}

画左下方的直角三角形

div{
    width:0px;
    height:0px;
    border-top:100px solid #fff;
    border-right:100px solid #fff;
    border-bottom:100px solid #f00;
}

画右上方直角三角形

div{
    width:0px;
    height:0px;
    border-top:100px solid #f00;
    border-left:100px solid #fff;
    border-bottom:100px solid #fff;
}

画右下方直角三角形

div{
    width:0px;
    height:0px;
    border-top:100px solid #fff;
    border-left:100px solid #fff;
    border-bottom:100px solid #f00;
}