必看！用CSS命令繪制常用小圖標，手把手教你操作

web開發中，我們經常要用到一些小圖標（加減勾叉等）。通常做法就兩種：

1、直接使用圖片；

2、使用css/svg直接在瀏覽器中繪制圖標；

方案1

由于圖標圖片比較多，而且體積很小，為了減少請求，我們需要用雪碧圖將圖標拼湊在同一張圖片里面，修改維護十分麻煩！

現在比較好的方案是使用webpack引入圖片，小圖直接轉換成base64插入css中。直接使用圖片比較簡單，這也是目前比較主流的做法。

● 方案2

相比方案1，明顯可以減小資源的體積，只需要幾條css/svg命令就可以繪制出精美的圖標，而且不受圖片尺寸限制，可大可小非常靈活。

初看方案2的一堆代碼可能會覺得非常難，但其實很多簡單的圖標都是非常容易實現的。

接下來就是同學們最期待的小智手把手教學時間啦。

01 暫停按鈕

<style>
            .box{
                width: 50px;
                height: 50px;
                background-color: black;
                border: 1px solid white;
                border-radius: 100%;
                outline: 15px solid white;
                outline-offset: -39px;
                cursor: pointer;
                transform: rotate(45deg);
            }
</style>
    <body>
    <div class="box"></div>

    </body>

02 加號按鈕

 .box{
                width: 50px;
                height: 50px;
                background-color: white;
                border: 1px solid black;
                border-radius: 100%;
                outline: 10px solid black;
                outline-offset: -35px;
                cursor: pointer;
            }
        </style>
    <body>
    <div class="box"></div>

    </body>

03 關閉按鈕

 <style>
            .box{
                width: 30px;
                height: 0;
                color: black;
                box-shadow: 20px 10px 0 3px ,20px 0 0 3px ,20px 20px 0 3px;
            }
</style>
    <body>
    <div class="box"></div>

    </body>

04 菜單按鈕

用陰影實現

<style>
                .box{
                    width: 30px;
                    height: 15px;
                    background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
                    outline: 1px solid black;
                    outline-offset: 4px;
                }
</style>
        <body>
        <div class="box"></div>

        </body>

用背景裁剪實現

<style>
            .box{
                width: 30px;
                height: 5px;
                padding: 5px 0;
                border-top: 5px solid black;
                border-bottom: 5px solid black;
                background-clip: content-box;
                background-color: black;
            }
</style>
    <body>
    <div class="box"></div>

    </body>

用漸變函數實現

<style>
                .box{
                    width: 30px;
                    height: 15px;
                    background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
                }
</style>
        <body>
        <div class="box"></div>

        </body>

05 文章圖標

<style>
                .box{
                    width: 16px;
                    height: 16px;
                    background-color: black;
                    border-radius: 100%;
                    box-shadow: 0 0 0 3px #fff,0 0 0 5px #000;
                    outline: 18px solid #ffffff;
                    outline-offset: -25px;
                    transform: scale(1.5);
                }
</style>
        <body>
        <div class="box"></div>

        </body>

06 單選按鈕

.box{
                    width:0;
                    color: #000;
                    border: 3px solid black;
                    outline: 6px dotted ;
                    outline-offset: 6px;

                }
.box{
                    width:0;
                    padding: 3px;
                    background-color: black;
                    outline: 6px dotted black;
                    outline-offset: 6px;
                }
.box{
                    height: 6px;
                    width: 6px;
                    background-color: black;
                    outline: 6px dotted black;
                    outline-offset: 6px;
                }

07 靶子圖標

.box{
                    width: 0;
                    color: #000;
                    border: 8px solid transparent;
                    border-top: 8px solid;
                    box-shadow: 0 -12px 0 -4px;
                }

08 田字圖標

.box{
                    width: 1px;
                    height: 6px;
                    color: #000;
                    border: 8px solid transparent;
                    border-top: 8px solid;
                    box-shadow: 0 -12px 0 -4px;
                    background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
                }

09 下載箭頭

.box{
                    width: 0;
                    color: #000;
                    border: 8px solid transparent;
                    border-top: 8px solid;
                    box-shadow: 0 -12px 0 -4px;
                }

10 下載箭頭（帶橫線）

.box{
                    width: 1px;
                    height: 6px;
                    color: #000;
                    border: 8px solid transparent;
                    border-top: 8px solid;
                    box-shadow: 0 -12px 0 -4px;
                    background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
                }

11 禁用圖標

言

在進行前端開發時，圖標庫的使用是一項必須掌握的技巧，目前流行的圖標庫有fontawesome，iconfont等，只需要引入到項目中，然后使用對應的class，就會得到對應的圖標。

但是你們有沒有想過，如果是自己的話該怎么去實現這些圖標呢？今天我們就來看看一些稍微復雜的圖標是如何使用純CSS3實現吧。

文中的代碼已經放到github上了，感興趣的同學自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html

CSS3

圖標庫

我們可以先來看看稍微復雜的圖標的樣子。

圖標庫

從圖標中可以看出，都是平時很常用的正確，錯誤，方向鍵，放大，縮小，開鎖，解鎖等。

我們從中抽取幾個，慢慢分析它們是如何實現的吧。

水杯

水杯的圖標如下所示。

水杯圖標

我們對水杯圖標進行拆分，分為杯身和杯柄兩個部分。

杯身中的白色長方形就是一個div，設置寬度和高度。
杯身的四周為黑色都是通過border實現，border-bottom比其他三個放向都要大。
杯身的下方是圓角，通過border-radius設置，border-radius的右下和左下方向設置相同的值。

通過上述的分析，我們可以得到杯身部分的CSS代碼。

杯身CSS代碼

杯柄通過偽元素:before實現。

杯柄設置為絕對定位，修改right值讓中間出現一個空白。
調整杯柄位置的寬度，只需要和杯身重疊即可。
杯柄右上角和右下角的border-radius設置為特定的值，展現成圓角的樣子。

通過以上的分析，我們可以得到杯柄部分的CSS代碼。

杯柄CSS代碼

心形

首先我們來看看心形圖案的樣子。

心形圖案

接下來我們同樣將整個圖案拆分來看，分成左右兩個部分，我們將上述圖案換成兩種不同顏色就一目了然了。

拆分圖案

從圖案中可以看出，它實際是由兩個相同的圖行旋轉不同的角度構成，相同的元素部分，可以通過設置border-radius值來實現。

我們將左右兩個半邊的形狀分別通過:before和:after來實現，原始的的div形狀的CSS屬性則很簡單，只需要設置相對位置和寬度為0即可。

基本CSS屬性

然后看看:before和:after共有的屬性，主要是保證為元素部分的定位為絕對定位，然后設置border-radius的值，保證上半部分是圓角。

共有CSS屬性

然后是關鍵的兩半邊各自的CSS屬性。左側的圖形距左邊應該為0，所以left: 0，右側的圖形距右側為0，所以right: 0。

各有的CSS屬性

同時左右兩側圖案需要進行旋轉，這里我們選擇旋轉48度，這是為什么呢？

很多人一下子可能會想到旋轉45度，我們來看看旋轉45度時的樣子。

旋轉45度

從圖形中可以看出，兩側有棱角，整個圖案就顯得不標準，當旋轉超過45度時，棱角的部分就會被里面的圖案遮住。

所以這里我們選擇旋轉48度，達到最終的效果。

最終效果圖

結束語

今天這篇文章我們使用純CSS3的屬性畫出了一個杯子和心形兩個稍微復雜點的圖案，其實其它圖案也是類似的，只要我們能將其拆分，每個部分獨立實現，再組合就可以達到圖標庫的效果了。

大家也可以自己動手實現一下噢~

片格式分類

圖片格式

位圖圖片: bmp、jpg、gif、png

矢量圖圖片: 以svg格式為代表, 可縮放矢量圖形(ScalabelVector Graphics)。 SVG是一種使用XML格式定義的圖像。

什么是傳統方式的圖標

圖標采用圖片格式, 有bmp、jpg、gif、png等文件格式

大小改變后, 可能會出現鋸齒效果, 影響美觀

什么是字體圖標

圖標全部字體格式

可以使用color、font-size..., 改變圖標的顏色、大小等樣式

利用CSS雪碧圖處理圖標

該技術的全稱是: CSS Sprite, 又稱css雪碧圖

使用font+html實現字體圖標的優缺點

優點: 輕量性、靈活性、兼容性好, 是目前被廣泛使用的技術

缺點: 大多數的圖標字體只能被渲染成單色

什么是svg格式?

它的英文全稱為 Scalabel Vector Graphics, 意思為可縮放的矢量圖形。

svg矢量圖庫官網有哪些?

阿里巴巴矢量圖標庫官網: http://www.iconfont.cn

icommoon圖標庫官網: https://icomoon.io/app/#/select

在線咨詢

上一篇：css中4種方法使內容居中
下一篇：十六種炫酷純css加載動畫（一）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

必看！用CSS命令繪制常用小圖標，手把手教你操作

言

圖標庫

水杯

心形

結束語

您的項目需求