html做三角形的原理,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;

}

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

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/4443.html