网页制作中我们经常会需要三角形图标，例如内容展开收起、左右箭头点击切换轮播，点击某条列表数据查看详情等。
三角形图标应用范围广，我们有必要了解一下它的实现原理。
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
微信扫一扫 
支付宝扫一扫 