css3实现三角形

总结：向哪个方向就没有那个方向的border，相邻边为透明，对边为三角形添加需要颜色。

①向上

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

②向下

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

③向左

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

④向右

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