有一次笔者在参加前端面试的过程中被面试官问到这样一个问题: BootStrapt里面的图标是怎么样的?
用过Bootstrapt的开发者都知道,在Bootstrapt里面有一个图标组件,引用这个文件之后,就可以通过给元素添加类名来给元素添加相应的图标,并且这个图标还可以改变颜色和大小。那么它是怎么实现的呢?
大家首先想到的最通用的添加图标的方法就是以图片的形式添加,但是仔细想一想,图片能改变颜色吗?
大家再想想,字体可以改变颜色和大小。而且CSS3支持web字体,使得图标的变化更为丰富,于是就有人用字体制作了图标。但是,我们今天要讲的是功能更强的图标制作方案:用纯生html和css制作图标。
下面从最简单的实例开始教大家如何使用CSS制作icon
1.三角形图标
效果图:
详细讲解实现过程:
首先,实现长方形边框
HTML的块级元素都是长方形的,比如我们设定了以下样式:
<style>
.simple-retangle {
margin: 50px auto;
width: 200px;
height: 200px;
border: 40px solid salmon;
}
</style>
<div class="simple-retangle"></div>
这个长方形太单调了,再给它点颜色看看,咱们来个彩色边框吧。
<style>
.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;
}
</style>
<div class="colored-border-retangle"></div>
请注意长方形的4个角,以左上角为例,它到底是属于左边框还是上边框呢?
左上角,既属于左边框,又属于上边框,角落的归属成了一个问题,浏览器为了不让边框打架,就让二位各分一半吧。于是乎左上角就被一分为二,变成了两个三角形,三角形靠近哪个边框,就显示那个边框的颜色。
三角形的实现
我们把上面这个彩色边框的矩形内容拿掉,看看会发生什么。
<style>
.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;
}
</style>
<div class="colored-border-empty-retangle"></div>
呜,cool!左边和右边都是三角形了 耶!
为什么上边和下边还是梯形呢?这是因为块级元素默认会在页面上水平平铺。
理解这一点让上边和下边也变成三角形就简单了,将元素的width属性设为0:
<style>
.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;
}
</style>
<div class="colored-border-empty-retangle"></div>
现在上下左右4个边框都是三角形了。
如何制作成三角形呢?把三个边框设置成透明试一试!
<style>
.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;
}
</style>
<div class="triangle-top"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>
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图标,相信大家学习了之后,发散自己的思维,就可以制作出更多的图案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<style type="text/css">
/*容器*/
/*将绝对大小变为相对大小,可以通过改变容器的大小控制图案的大小*/
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;
}
</style>
</head>
<body>
<div class="Home">
<div class="left"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>
好了,下面该是你设计出自己图案的时候了~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。