css绘制三角形原理

1) 首先我们来实现一个最基础的边框效果

.content {
    width: 50px;
    height: 50px;
    border: 2px solid;
    border-color:#ff9600 #3366ff #12ad2a #f0eb7a;
}

效果如下：

2) 然后我们尝试将border值放大10倍

.content {
    width: 50px;
    height: 50px;
    border: 20px solid;
    border-color: #ff9600 #3366ff #12ad2a #f0eb7a;
}

效果如下：

上图中我们可以很清楚地看到，在绘制border的时候并不是矩形区域，而是梯形区域，那么此时如果我们将width和height值设置为0，看会发生什么：

.content {
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: #ff9600 #3366ff #12ad2a #f0eb7a;
}

效果如下：

此时会看到一个由四个三角形拼装而成的矩形区域，即由上下左右四个边框组合而成。因此不难想象，如果我们想得到某一个方向的三角形，我们只需要让其他方向的边框不可见就行了，例如我们想得到一个朝左的三角形：

.content {
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: transparent #3366ff transparent transparent;
}

效果如下:

 

这样就得到了一个很完美的三角形图标，是不是很简单？