使用CSS生成圖標(biāo)

helloworldcoding 發(fā)布于2019-08-29 11:18 / 3431人閱讀

摘要：理解這一點讓上邊和下邊也變成三角形就簡單了，將元素的屬性設(shè)為現(xiàn)在上下左右個邊框都是三角形了。實例二制作快進(jìn)按鈕效果為了減少頁面的元素，我們可以只提供一個元素實現(xiàn)第個三角形，然后借助的偽類實現(xiàn)第個三角形。

有一次筆者在參加前端面試的過程中被面試官問到這樣一個問題： BootStrapt里面的圖標(biāo)是怎么樣的？
用過Bootstrapt的開發(fā)者都知道，在Bootstrapt里面有一個圖標(biāo)組件，引用這個文件之后，就可以通過給元素添加類名來給元素添加相應(yīng)的圖標(biāo)，并且這個圖標(biāo)還可以改變顏色和大小。那么它是怎么實現(xiàn)的呢？
大家首先想到的最通用的添加圖標(biāo)的方法就是以圖片的形式添加，但是仔細(xì)想一想，圖片能改變顏色嗎？
大家再想想，字體可以改變顏色和大小。而且CSS3支持web字體，使得圖標(biāo)的變化更為豐富，于是就有人用字體制作了圖標(biāo)。但是，我們今天要講的是功能更強(qiáng)的圖標(biāo)制作方案：用純生html和css制作圖標(biāo)。

下面從最簡單的實例開始教大家如何使用CSS制作icon
1.三角形圖標(biāo)
效果圖：

詳細(xì)講解實現(xiàn)過程：
首先，實現(xiàn)長方形邊框
HTML的塊級元素都是長方形的，比如我們設(shè)定了以下樣式：

這個長方形太單調(diào)了，再給它點顏色看看，咱們來個彩色邊框吧。

請注意長方形的4個角，以左上角為例，它到底是屬于左邊框還是上邊框呢？
左上角，既屬于左邊框，又屬于上邊框，角落的歸屬成了一個問題，瀏覽器為了不讓邊框打架，就讓二位各分一半吧。于是乎左上角就被一分為二，變成了兩個三角形，三角形靠近哪個邊框，就顯示那個邊框的顏色。
三角形的實現(xiàn)
我們把上面這個彩色邊框的矩形內(nèi)容拿掉，看看會發(fā)生什么。

嗚，cool！左邊和右邊都是三角形了耶！

為什么上邊和下邊還是梯形呢？這是因為塊級元素默認(rèn)會在頁面上水平平鋪。
理解這一點讓上邊和下邊也變成三角形就簡單了，將元素的width屬性設(shè)為0：

現(xiàn)在上下左右4個邊框都是三角形了。

如何制作成三角形呢？把三個邊框設(shè)置成透明試一試！

2.下面是一個實現(xiàn)旗幟的效果：

根據(jù)以上知識，我們很自然地就能想到實現(xiàn)方法，將border-bottom的顏色設(shè)置為透明的。

/*CSS：*/
.flag {
width: 0;
height: 0;
border: 2rem solid #FF6600;
border-top-width: 4rem;
border-bottom-color: transparent;
border-bottom-width: 2rem;
}

實例二：制作快進(jìn)按鈕效果

為了減少頁面的HTML元素，我們可以只提供一個元素實現(xiàn)第1個三角形，然后借助CSS3的偽類實現(xiàn)第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的顏色來控制的。

經(jīng)過以上兩個例子，大家對制作圖案的原理都有初步的了解了吧。下面的實例三將帶領(lǐng)大家制作一個常用的icon圖標(biāo)，相信大家學(xué)習(xí)了之后，發(fā)散自己的思維，就可以制作出更多的圖案。