css绘制实心三角形

用css绘制三角形原理其实很简单，用到的是border-color，这个属性可以设置四条边框的颜色：

border-color:red green blue pink;

• 上边框是红色
• 右边框是绿色
• 下边框是蓝色
• 左边框是粉色 

我们来把一个盒子宽高都设置为0，只给边框：

html:

<i class="caret-con"></i>

css:

i{
    display: block;
    margin-top: 30px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
}
.caret-con{
    border-color: #f99 #333 #fca #f23;
}

效果如下：

所以我们绘制三角形只需要给一个方向的边框颜色就可以了。代码示例：

html:

<i class="caret-top"></i>
<i class=