CSS使用border构建图标

CSS使用border构建图标

使用border画三角形

　　盒模型中上下左右边框交界处呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等。具体链接

画朝上朝下的√小图标

　　使用border可以画很多与三角形有关的东东，比如我们经常见到的向上向下的“对号图标”就是使用两层border叠加生成的。

　　首先我们需要一个div和两个i，两个i就是用来叠加生成对号图标用的。

HTML:

<div class="bottom"><!-- 这里换成top就是向上的对号-->
	<i class="arrow1"></i>
	<i class="arrow2"></i>
</div>

CSS:

.bottom{
	width: 20px;
	height: 20px;
	position: relative;
}
.bottom .arrow1,.bottom .arrow2{
	display: block;
	position: absolute;
	width: 0px;/*宽高设为0才能上下左右的border显示为三角形*/
	height: 0px;
	border-left: 8px dashed transparent;/*transparent主要为了应用在网页中不盖住底色*/
	border-right: 8px dashed transparent;
}

　　然后下面关键的就来了，我们给第一个只设置上边框的话在这种情况下是个三角形：

　　然后我们可以给第二个再设置一个白色的三角形然后用绝对定位的偏移使它下移盖住灰色三角形的一部分：

.bottom .arrow1{
	border-top: 8px solid #999;
	border-bottom: 8px dashed transparent;
}
.bottom .arrow2{
    top: -2px;
    border-top: 8px solid #fff;
    border-bottom: 8px dashed transparent;
}

　　然后我们一开始的那个向下的对号图标就出现啦，向上同理啦，下面就是向上向下放在一起的完整版CSS。

.bottom,.top{
	width: 20px;
	height: 20px;
	position: relative;
}
.bottom .arrow1,.bottom .arrow2,.top .arrow1,.top .arrow2{
	display: block;
	position: absolute;
	width: 0px;
	height: 0px;
	border-left: 8px dashed transparent;
	border-right: 8px dashed transparent;
}
.bottom .arrow1{
	border-top: 8px solid #999;
	border-bottom: 8px dashed transparent;
}
.bottom .arrow2{
	top: -2px;
	border-top: 8px solid #fff;
	border-bottom: 8px dashed transparent;
} 
.top .arrow1{
	border-top: 8px dashed transparent;
	border-bottom: 8px solid #999;			
}
.top .arrow2{
	top: 2px;
	border-top: 8px dashed transparent;
	border-bottom: 8px solid #fff;
}