使用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>

好了，下面該是你設計出本身圖案的時候了~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。