css3实现三角形（上下左右）

第一步：新建一个div。

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

1.向上

div{

width:0;

height:0;

border-right:50px solid transparent;

border-left:50px solid transparent;

border-bottom:50px solid red;

}

2.向下

div{

width:0;

height:0;

border-right:50px solid transparent;

border-left:50px solid transparent;

border-top:50px solid red;

}

3.向左

div{

width:0;

height:0;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

border-right:50px solid red;

}

4.向右

div{

width:0;

height:0;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

border-left:50px solid red;

}