使用CSS生成圖標

godiscoder 發布于2019-08-01 15:42 / 883人閱讀

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

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

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

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

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

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

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

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

現在上下左右4個邊框都是三角形了。

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

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圖標，相信大家學習了之后，發散自己的思維，就可以制作出更多的圖案。




    
    Home

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50058.html

淺談 CSS Sprites 雪碧圖應用

摘要：編寫配置文件，以下是關鍵配置代碼雪碧圖合并輸出到文件參數執行目錄參數生成的和圖片的文件名之所以推薦，是因為非常的靈活，看懂模塊的可以根據你的項目情況編寫對應的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言網站開發90%會用到小圖標，多小圖標調用顯示是前端開發常見的問題；目前小圖標顯示常見有兩種方式...

MkkHou 2019-08-30 13:12 評論0 收藏0
iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0
svgtofont.js 自動生成圖標字體和彩色圖標文件

摘要：使用說明圖標字體只能被渲染成單色，不能生成彩色圖標。自動生成預覽網站，預覽字體文件。創建最大輸入圖標寬度的等寬字體。輸出的字體高度默認為最高輸入圖標的高度。自動生成樣式和。一般情況我通過 iconfont 或者 icomoon 來實現圖標管理生成字體，導入到項目中使用。 ┌────────┐ ┌────────────...

objc94 2019-08-23 12:04 評論0 收藏0
svgtofont.js 自動生成圖標字體和彩色圖標文件

摘要：使用說明圖標字體只能被渲染成單色，不能生成彩色圖標。自動生成預覽網站，預覽字體文件。創建最大輸入圖標寬度的等寬字體。輸出的字體高度默認為最高輸入圖標的高度。自動生成樣式和。一般情況我通過 iconfont 或者 icomoon 來實現圖標管理生成字體，導入到項目中使用。 ┌────────┐ ┌────────────...

ranwu 2019-08-30 15:54 評論0 收藏0
CSS4:icon全解

摘要：全解法如何在文件里扣出圖層里的圖標右鍵選中這個圖層右擊這個圖層把這個圖層放到新文件點擊圖片的按鈕自動切圖到最小再調整一下畫布大小將圖片設置為長寬一樣導出即可在頁面里圖片會默認保持比例所以只要設置寬高的其中一種就可以了摳圖的前端現在基本沒有了 CSS4:icon全解 1.img法 1.1如何在psd文件里扣出圖層里的圖標右鍵選中這個圖層showImg(https://segmentf...

LinkedME2016 2019-08-30 15:53 評論0 收藏0
使用CSS生成圖標

摘要：理解這一點讓上邊和下邊也變成三角形就簡單了，將元素的屬性設為現在上下左右個邊框都是三角形了。實例二制作快進按鈕效果為了減少頁面的元素，我們可以只提供一個元素實現第個三角形，然后借助的偽類實現第個三角形。有一次筆者在參加前端面試的過程中被面試官問到這樣一個問題： BootStrapt里面的圖標是怎么樣的？用過Bootstrapt的開發者都知道，在Bootstrapt里面有一個圖標組件，...

helloworldcoding 2019-08-29 11:18 評論0 收藏0