使用css3绘制三角形（上下左右）

第一步：新建div盒子

<div class="sanjiaoxing"></div>

第二步：为盒子添加CSS样式。

上三角形

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

下三角形

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

左三角形

.sanjiaoxing{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-right:50px solid red;
}

右三角形

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