css3实现三角形（上下左右）【转载】

https://blog.csdn.net/qq_34382449/article/details/81234653

1.向上

.kailong{

width:0;

height:0;

border-right:50pxsolid transparent;

border-left:50pxsolid transparent;

border-bottom:50pxsolid red;

}

2.向下

.kailong{

width:0;

height:0;

border-right:50pxsolid transparent;

border-left:50pxsolid transparent;

border-top:50pxsolid red;

}

3.向左

.kailong{

width:0;

height:0;

border-top:50pxsolid transparent;

border-bottom:50pxsolid transparent;

border-right:50pxsolid red;

}

4.向右

.kailong{

width:0;

height:0;

border-top:50pxsolid transparent;

border-bottom:50pxsolid transparent;

border-left:50pxsolid red;

}

至此css3实现三角形的绘制完成了。