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;

heig