2. 程式人生 > >純CSS製作各種各樣的網頁圖示（三角形、暫停按鈕、下載箭頭、加號等）

純CSS製作各種各樣的網頁圖示（三角形、暫停按鈕、下載箭頭、加號等）

阿新 • • 發佈：2018-11-09

三角形

?

1

2

3

4

5

6

7

8

9

10

11

<div class="box"></div>

<style>

.box{

            width: 0;

            height: 0;

            

border-top: 50px solid transparent;

            border-bottom: 50px solid transparent;

            border-left: 50px solid transparent;

            

border-right: 50px solid red;

}

</style>

平行四邊形圖示

?

1

2

3

4

5

6

7

8

9

10

<div class="box"></div>

<style>

 .box{

            width: 50px;

            

height: 50px;

            margin: 100px auto;

            background-color: red;

            transform: skew(-25deg);

        }

</style>

暫停按鈕

?

1

2

3

4

5

6

7

8

9

10

11

12

13

<div class="box"></div>

    <style>

        .box{

            width: 50px;

            height: 50px;

            margin: 100px auto;

            color: #000;

            border: 1px solid;

            border-radius: 50%;

            outline: 10px solid;

            outline-offset: -26px;

        }

    </style>

暫停按鈕的實現原理就是邊框用border，裡面的正方形用outline。因為outline有一個offset屬性可以用來設定偏移量，並且是按照比例來的。

其實如果再將outline-offset的值設定小一點，一個加好就出來了

加號

?

1

2

3

4

5

6

7

8

9

10

11

12

13

<div class="box"></div>

<style>

    .box{

        width: 50px;

        height: 50px;

        margin: 100px auto;

        color: #000;

        border: 1px solid;

        border-radius: 50%;

        outline: 10px solid;

        outline-offset: -35px;

    }

</style>

如果再將其旋轉，就變成了一個關閉按鈕

關閉按鈕

?

1

2

3

4

5

6

7

8

9

10

11

12

13

<div class="box"></div>

<style>

    .box{

        width: 50px;

        height: 50px;

        margin: 100px auto;

        color: #000;

        border: 1px solid;

        border-radius: 50%;

        outline: 10px solid;

        outline-offset: -35px;

        transform: rotate(45deg);

    }

漢堡按鈕

?

1

2

3

4

5

6

7

8

9

10

11

<div class="box"></div>

<style>

    .box{

        width: 50px;

        height: 0px;

        margin: 100px auto;

        box-shadow: 36px 10px 0 3px red,

        36px 0 0 3px red,

        36px 20px 0 3px red;

    }

</style>

漢堡按鈕2：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

<div class="box"></div>

<style>

    .box{

        width: 30px;

        height: 3px;

        margin: 100px auto;

        padding: 2px 0;

        border-top: 3px solid red;

        border-bottom: 3px solid red;

        background-clip: content-box;

        background-color: red;

    }

</style>

單選按鈕

因為box-shadow會按比例縮放，因此將第一個值設定為白色，然後將第二個值設定的比第一個值大就可以了

?

1

2

3

4

5

6

7

8

9

10

11

<div class="box"></div>

<style>

    .box{

        width: 30px;

        height: 30px;

        margin: 100px auto;

        background-color: #000;

        border-radius: 50%;

        box-shadow: 0 0 0 5px #fff,0 0 0 10px #000;

    }

</style>

圓圈中帶個十字

?

1

2

3

4

5

6

7

8

9

10

11

12

13

<div class="box"></div>

<style>

    .box {

        width: 30px;

        height: 30px;

        margin: 100px auto;

        background-color: #000;

        border-radius: 50%;

        box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;

        outline: 36px solid #fff;

        outline-offset: -50px;

    }

</style>

田型圖示

?

1

2

3

4

5

6

7

8

9

10

<div class="box"></div>

<style>

    .box {

        width: 0;

        margin: 100px auto;

        border: 3px solid red;

        outline: 6px dotted red;

        outline-offset: 6px;

    }

</style>

下載箭頭

使用border製作三角形，使用box-shadow製作正方形，主要用了偏移

?

1

2

3

4

5

6

7

8

9

10

11

<div class="box"></div>

<style>

    .box {

        width: 0;

        margin: 100px auto;

        color: red;

        border: 8px solid transparent;

        border-top: 8px solid red;

        box-shadow: 0 -12px 0 -4px;

    }

</style>

書籤

實現這種效果的原理就是講三角形設定成背景色，這樣空心的三角形就出現了

?

1

2

3

4

5

6

7

8

9

10

<div class="box"></div>

<style>

    .box {

        width: 0;

        height: 8px;

        background-color:orange;

        border: 8px solid transparent;

        border-bottom: 8px solid #fff;

    }

</style>

兩個半圓圖示

這個比較簡單，就是通過漸變函式來實現，然後來個圓角邊框

?

1

2

3

4

5

6

7

8

9

<div class="box"></div>

<style>

    .box {

       width: 50px;

        height: 50px;

        border-radius: 50%;

        background-image: linear-gradient(to right,#ccc 50%,#000 50%);

    }

</style>

禁用圖示

外圈利用圓角邊框，裡面的豎線用漸變來做，然後再用旋轉屬性即可

?

1

2

3

4

5

6

7

8

9

10

11

<div class="box"></div>

<style>

    .box {

       width: 50px;

        height: 50px;

        border-radius: 50%;

        border:2px solid #000;

        background: linear-gradient(to right,#fff  45%,#000 45%,#000 45%,#fff 55%);

        transform: rotate(40deg);

    }

</style>

左右箭頭圖示

既然能做出一個三角形，那麼就可以做出兩個三角形。

?

1

2

3

4

5

6

7

8

9

10

11

12

<div class="box"></div>

<style>

    .box {

        width: 0;

        height: 0;

        margin: 100px auto;

        border: 10px solid transparent;

        border-left: 10px solid red;

        -webkit-box-reflect: left 5px;

        box-reflect:left 5px;

    }

</style>

需要在Chrome瀏覽器中開啟，因為其他瀏覽器或許不支援

鷹嘴圖示

?

1

2

3

4

5

6

7

8

9

10

<div class="box"></div>

<style>

    .box {

       width: 32px;

        margin: 100px auto;

        border-top: 50px solid transparent;

        border-right: 22px solid #096;

        border-bottom-right-radius: 100%;;

    }

</style>

相關推薦

純CSS製作各種各樣的網頁圖示（三角形、暫停按鈕、下載箭頭、加號等）

三角形 ? 1 2 3 4 5 6 7 8 9 10 11 <div class="box"></div> <style> .box{       &

前端學習筆記（四）--CSS控制UL LI 的樣式詳解(推薦)及純CSS製作各種各樣的網頁圖示（三角形、暫停按鈕、下載箭頭、加號等）

DIV+CSS裡，我們用得最多的就是ul li來顯示資料，如新聞按鈕等。下面給大家一個css ul li的例子供學習<div id="menu"> <ul> <li><a href="#">首頁</a></

純CSS畫的基本圖形（矩形、圓形、三角形、多邊形、愛心、八卦等）

技術分享 部分 fin display 三角形 spl back transform 純css 今天在css-tricks上看到一篇文章，那篇文章讓我不禁心頭一震，強大的CSS啊，居然能畫出這麽多基本的圖形。圖形包括基本的矩形、圓形、橢圓、三角形、多邊形，也包括稍微復雜一點

純css製作導航下拉選單

 轉載文章，覺得作者思路很好  <nav>         <ul>         

純CSS製作滑動切換開關

效果演示： 程式碼部分： <input type="checkbox" class="toggle"> <div class="inner"> </div>   body{ margin:0; height:100

純CSS實現立體感圓盤（立體化按鈕），點選有圖

線上編輯：https://codepen.io/sunnercms/ <div class="inner"> <div class="disc"> </div> </div> .inner{ position:relative;

偏前端-純css,手寫輪播-（焦點切換 和 自動輪播 只可選擇一種，兩者不可共存）

set abs aci count right container 是什麽 設置 網上 現在我們一般都是在網上找個輪播插件，各種功能應有盡有，是吧！！~大家似乎已經生疏了手寫是什麽感覺。萬一哪天想不起來，人家要手寫，就尷尬了！~~跟我一起復習一下吧 不多說：效果圖看一下：

如何用Photoshop製作方形ico圖示（致敬Pycharm）

前言        先來看一下圖片效果，其中字母可以根據自己需求設定。 軟體 Photoshop CS6 製作步驟 1.  開啟Photoshop CS6，點選選單欄中 檔案 》新建，如下圖介面  

web前端小案例-純css製作水滴效果

html程式碼：<div class="drip"></div>css程式碼： <style> html, body { margin: 0; height: 100%; width: 100%; display: flex; background-c

純CSS製作冒泡提示框

在此基礎上，今天分享一篇文章給大家，如果利用CSS製作冒泡提示框。 先看2張效果圖： CSS： /* 對話氣泡 用法：使用.speech-bubble和.speech-bubb

使用純CSS製作展開合併立方體特效

顯示效果 原始碼 <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

純css製作旋轉圖片

       看到一個不錯的網站上製作了一個可以360旋轉的圖片，感覺效果不錯，於是就自己用css製作了一個，效果圖如下：      具體實現程式碼如下： <!DOCTYPE html>

純CSS實現簡易輪播（一）

做專案的時候總用別人的輪播外掛，就想著自己能不能做一個輪播，能不能用純CSS做的，然後就在網上查了一下，發現例子還不少，然後看一下別人的，自己照貓畫虎的也來一個試試，很簡單的一個效果，這個的體驗效果不太好，想學習的可以看一下試試 html程式碼： <!DOCTYPE

純CSS製作圓角矩形框知識總結

    在製作後臺登入頁的時候，需要從網頁上面把那個圓角矩形框選取下來，然後通過Photoshop進行切割，在進行設定，最後得到需要的登入框的圓角矩形框。如下圖。     但是登入最新的智囊團的那個登入頁面的時候，上面的那個圓角矩形框已經沒有了，最新的登陸頁面跟QQ郵箱登

純css製作三級下拉選單

css本身的功能就挺強大的，尤其是css3出來之後，大部分特效只用css3就能完成了，無需再費心思去想js怎麼怎麼做jQuery怎麼怎麼做，程式碼簡潔質量輕巧。下面是本人用純css製作的三級下拉選單效果： 思路很簡單，三級選單直接用三層巢狀的ul佈局：

純css製作彩色圓環彈跳效果

這個效果是由185行純css程式碼製作，佈局相對簡單，有正在學習前端基礎的小夥伴可以用來練習一下，現在越來越多的企業重視起基礎知識了，所以有要找工作的小夥伴和正在找工作的小夥伴記得多練習基礎的知識，把基礎練紮實哦。 文章分享之前小編推薦一下我的前端學習群：575308719，裡面都是學習前端的，如果你想

純css使用線性漸變實現滾動進度條(來自於微信前端早讀課）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

Java版運算元彙總（包括filter，collect，take，first,sample等）【Java純程式碼】

package com.bjsxt; import java.util.List; import org.apache.spark.SparkConf; import org.apache.spark.api.java.JavaRDD; import org.apache

spark dataframe操作集錦（提取前幾行，合並，入庫等）

tex hang count() time cache height 以及 入庫 blank Spark dataframe派生於RDD類，但是提供了非常強大的數據操作功能。當然主要對類SQL的支持。 在實際工作中會遇到這樣的情況，主要是會進行兩個數據集的篩選、合並，重

for語句的強化（水仙花，九九乘法表，回文數等）

圖形 數字 print java [] 三次 println 九九 r語 一、輸出如下圖形：11 21 2 31 2 3 41 2 3 4 51 2 3 4 5 61 2 3 4 5 6 71 2 3 4 5 6 7 81 2 3 4 5 6 7 8 9 public cl