html5 css3图标制作,使用CSS生成图标

有一次笔者在参加前端面试的过程中被面试官问到这样一个问题： BootStrapt里面的图标是怎么样的？

用过Bootstrapt的开发者都知道，在Bootstrapt里面有一个图标组件，引用这个文件之后，就可以通过给元素添加类名来给元素添加相应的图标，并且这个图标还可以改变颜色和大小。那么它是怎么实现的呢？

大家首先想到的最通用的添加图标的方法就是以图片的形式添加，但是仔细想一想，图片能改变颜色吗？

大家再想想，字体可以改变颜色和大小。而且CSS3支持web字体，使得图标的变化更为丰富，于是就有人用字体制作了图标。但是，我们今天要讲的是功能更强的图标制作方案：用纯生html和css制作图标。

下面从最简单的实例开始教大家如何使用CSS制作icon

1.三角形图标

效果图：

详细讲解实现过程：

首先，实现长方形边框

HTML的块级元素都是长方形的，比如我们设定了以下样式：

.simple-retangle {

margin: 50px auto;

width: 200px;

height: 200px;

border: 40px solid salmon;

}

这个长方形太单调了，再给它点颜色看看，咱们来个彩色边框吧。

.colored-border-retangle {

margin: 50px auto;

width: 200px;

height: 200px;

border-top: 40px solid coral;

border-right: 40px solid lightblue;

border-bottom: 40px solid lightgreen;

border-left: 40px solid mediumpurple;

}

请注意长方形的4个角，以左上角为例，它到底是属于左边框还是上边框呢？

左上角，既属于左边框，又属于上边框，角落的归属成了一个问题，浏览器为了不让边框打架，就让二位各分一半吧。于是乎左上角就被一分为二，变成了两个三角形，三角形靠近哪个边框，就显示那个边框的颜色。

三角形的实现

我们把上面这个彩色边框的矩形内容拿掉，看看会发生什么。

.colored-border-empty-retangle {

margin: 50px auto;

height:0;

border-top: 40px solid coral;

border-right: 40px solid lightblue;

border-bottom: 40px solid lightgreen;

border-left: 40px solid mediumpurple;

}

呜，cool！左边和右边都是三角形了 耶！

为什么上边和下边还是梯形呢？这是因为块级元素默认会在页面上水平平铺。

理解这一点让上边和下边也变成三角形就简单了，将元素的width属性设为0：

.colored-border-empty-retangle {

margin: 50px auto;

width: 0;

height: 0;

border-top: 40px solid coral;

border-right: 40px solid lightblue;

border-bottom: 40px solid lightgreen;

border-left: 40px solid mediumpurple;

}

现在上下左右4个边框都是三角形了。

如何制作成三角形呢？把三个边框设置成透明试一试！

.triangle-top,

.triangle-right,

.triangle-bottom,

.triangle-left {

margin: 20px auto;

width: 0;

height: 0;

border: 100px solid transparent;

}

.triangle-top {

border-top-color: coral;

}

.triangle-right {

border-right-color: lightblue;

}

.triangle-bottom {

border-bottom-color: lightgreen;

}

.triangle-left {

border-left-color: mediumpurple;

}

2.下面是一个实现旗帜的效果：

根据以上知识，我们很自然地就能想到实现方法，将border-bottom的颜色设置为透明的。

/*CSS：*/

.flag {

width: 0;

height: 0;

border: 2rem solid #FF6600;

border-top-width: 4rem;

border-bottom-color: transparent;

border-bottom-width: 2rem;

}

实例二：制作快进按钮效果

为了减少页面的HTML元素，我们可以只提供一个元素实现第1个三角形，然后借助CSS3的伪类实现第2个三角形。

第1个三角形使用了相对定位，第2个三角形使用了绝对定位，使得第2个三角形能够紧挨着第1个三角形。

/*CSS：*/

.rds-arrow-wrapper {

position: relative;

width: 20em;

text-align: center;

}

.rds-arrow,

.rds-arrow:after {

display: inline-block;

position: relative;

width: 0;

height: 0;

border-top: 1rem solid transparent;

border-left: 2rem solid #eae;

border-bottom: 1rem solid transparent;

border-right: 2rem solid transparent;

}

.rds-arrow {

margin-left: 1rem;

}

.rds-arrow:after {

content: "";

position: absolute;

left: 100%;

top: -1rem;

bottom: 0;

}

需要注意的是，箭头方向是向右的，但在CSS里面是通过border-left的颜色来控制的。

经过以上两个例子，大家对制作图案的原理都有初步的了解了吧。下面的实例三将带领大家制作一个常用的icon图标，相信大家学习了之后，发散自己的思维，就可以制作出更多的图案。

Home

/*容器*/

/*将绝对大小变为相对大小，可以通过改变容器的大小控制图案的大小*/

body{

position: relative;

font-size:67.25%;/*16px * 67.25 = 10px */

}

/*Home居中显示*/

.Home{

position: absolute;

margin: 0 auto;

width:50%;

left: 0;right: 0;

}

/*烟囱制作*/

.left{

position: absolute;

width: 0;height: 0;

border: 1em solid gray;

border-top:2em solid gray;

top:1em;

left:2em;

}

/*屋顶制作*/

.top{

position: absolute;

width: 0;height: 0;

border: 8em solid transparent;

border-bottom: 8em solid gray;

top: -8em;

left: -2em;

}

/*房屋制作*/

.bottom{

position: absolute;

width: 7em;height: 8em;

border: 1em solid gray;

border-top: 1em solid transparent;

top:6em;

left:1.5em;

}

好了，下面该是你设计出自己图案的时候了~