纯CSS3画三角形（上下左右）

前言及准备

UI中有三角形形状时，往往会直接从图上面切出来，然后是用img或者background请求图片，这样处理在视觉效果上不会有什么差异，不过增加了数据的请求量，占用了网页加载的时长。所以需要三角形时，我们可以使用css3来进行绘制。
准备：
写一行html代码，代表三角形，然后通过css样式来使三角形显示出来。

<div class="kailong"></div>

一、顶角向上

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

top.png

二、顶角向下

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

bottom.png

三、顶角向左

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

left.png

四、顶角向右

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

right.png