使用CSS生成图标

时间 2020-01-09

标签使用 css 生成图标栏目 CSS 繁體版

原文原文链接

有一次笔者在参加前端面试的过程当中被面试官问到这样一个问题： BootStrapt里面的图标是怎么样的？
用过Bootstrapt的开发者都知道，在Bootstrapt里面有一个图标组件，引用这个文件以后，就能够经过给元素添加类名来给元素添加相应的图标，而且这个图标还能够改变颜色和大小。那么它是怎么实现的呢？
你们首先想到的最通用的添加图标的方法就是以图片的形式添加，可是仔细想想，图片能改变颜色吗？
你们再想一想，字体能够改变颜色和大小。并且CSS3支持web字体，使得图标的变化更为丰富，因而就有人用字体制做了图标。可是，咱们今天要讲的是功能更强的图标制做方案：用纯生html和css制做图标。
css

下面从最简单的实例开始教你们如何使用CSS制做icon
1.三角形图标
效果图：
html

详细讲解实现过程：
首先，实现长方形边框
HTML的块级元素都是长方形的，好比咱们设定了如下样式：前端

<style>
.simple-retangle {
    margin: 50px auto;
    width: 200px;
    height: 200px;
    border: 40px solid salmon;
}
</style>
<div class="simple-retangle"></div>

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

<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：app

<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.下面是一个实现旗帜的效果：
spa

根据以上知识，咱们很天然地就能想到实现方法，将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>

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