CSS繪制小圖標

本文轉載自查看原文 2020-03-27 14:51 673

css實現小圖標一般是由::before、::after、border、transform、position實現

1 最簡單且熟悉的就是三角形了：

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .t1{
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 10px solid #000;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
        .t2{
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 10px solid #000;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }
        .t3{
            display: inline-block;
            width: 0;
            height: 0;
            border-bottom: 10px solid #000;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
        .t4{
            display: inline-block;
            width: 0;
            height: 0;
            border-right: 10px solid #000;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }
    </style> 
    <body>
        <span class="t1"></span>
        <span class="t2"></span>
        <span class="t3"></span>
        <span class="t4"></span>
    </body>

效果圖：

2 小房子

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .home{
            width: 40px;
            height: 40px;
            position: relative;
        }
        .home::before{
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 0;
            left: 0;
            border: 20px solid transparent;
            border-bottom-color: #000;
            border-top: 0;
        }
        .home::after{
            content: '';
            height: 12px;
            width: 12px;
            position: absolute;
            top: 18px;
            left: 6px;
            border: 8px solid #000;
            border-bottom: 0;
            border-top-width: 10px;
        }
    </style> 
    <body>
        <p class="home"></p>
    </body>

效果圖：

bottom-top-width 左右邊框時指邊框的寬度值，上下邊框時指邊框的高度值

3 音量加圖標

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 40px;
            height: 40px;
            position: relative;
            margin: 20px;
        }
        .span1::before{
            content: '';
            height: 16px;
            width: 12px;
            display: block;
            background: #333;
            position: absolute;
            top: 12px;
            left: 0px;
        }
        .span1::after{
            content: '';
            height: 16px;
            width: 0;
            display: block;
            border: 10px transparent solid;
            border-left-width: 0;
            border-right-color: #333;
            position: absolute;
            top: 2px;
            left: 10px;
        }
        .span2::before{
            content: '';
            height: 4px;
            width: 16px;
            display: block;
            background: #333;
            position: absolute;
            top: 18px;
            left: 22px;
        }
        .span2::after{
            content: '';
            height: 16px;
            width: 4px;
            display: block;
            background: #333;
            position: absolute;
            top: 12px;
            left: 28px;
        }
    </style> 
    <body>
        <div>
            <span class="span1">
                <span class="span2">

                </span>
            </span>
        </div>
    </body>

效果圖：

4 下載圖標

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        span{
            width: 26px;
            height: 36px;
            border-bottom: 4px #333 solid;
            display: block;
            position: relative;
            overflow: hidden;
        }
        span::before{
            content: '';
            height: 20px;
            width: 20px;
            display: block;
            border: #333 solid;
            border-width: 0 6px 6px 0;
            position: absolute;
            bottom: 7px;
            left: 0px;
            transform: rotate(45deg);
        }
        span::after{
            content: '';
            height: 28px;
            width: 6px;
            display: block;
            background: #333;
            position: absolute;
            top: 0px;
            left: 10px;
        }
    </style> 
    <body>
        <span></span>
    </body>

效果圖：

5 電池電量圖標

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        span{
            width: 35px;
            height: 20px;
            background: #333;
            border-radius: 2px;
            display: block;
            position: relative;
        }
        span::before{
            content: '';
            height: 8px;
            width: 4px;
            background: #333;
            display: block;
            position: absolute;
            top: 6px;
            left: 35px;
        }
        span::after{
            content: '';
            height: 8px;
            width: 4px;
            background: #fff;
            display: block;
            position: absolute;
            top: 6px;
            left: 6px;
            box-shadow: 9px 0 0 #fff;   /* 第二格電是用這個box-shadow實現的。第一個值9是指向右平移了9像素，第二個0指豎直方向不平移即和第一個電量格齊平，第三個0是指模糊的距離，這里值不模糊 */
        }
    </style> 
    <body>
        <span></span>
    </body>

效果圖：

6 上升趨勢圖標

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .span1{
            width: 36px;
            height: 36px;
            border: #333 solid;
            border-width: 0 0 4px 4px;
            display: block;
        }
        .span1::before{
            content: '';
            height: 4px;
            width: 18px;
            display: block;
            background: #333;
            position: absolute;
            top: 24px;
            left: 0;
            transform: rotate(-55deg);
            box-shadow: 15px 10px 0 #333;  /* 這里第二條向上的折線就是用這個box-shadow實現的，向右平移了15像素，向上平移了10像素，0為不模糊，顏色為#333 */
        }
        .span1::after{
            content: '';
            height: 4px;
            width: 13px;
            display: block;
            background: #333;
            position: absolute;
            top: 21px;
            left: 11px;
            transform: rotate(39deg);
        }
        .span2::before{
            content: '';
            height: 0;
            width: 0;
            display: block;
            border: 10px solid transparent;
            border-right-width: 0;  /* 這里右邊框的寬度設置為0可以使上邊框（三角形）失去右邊的一半，以達到想要的效果 */
            border-top-color: #333;
            position: absolute;
            top: 8px;
            left: 25px;
        }
    </style> 
    <body>
        <span class="span1">
            <span class="span2"></span>
        </span>
    </body>

效果圖：

7 鎖形圖標

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        span{
            width: 38px;
            height: 25px;
            margin-top: 40px;
            background: #333;
            border-radius: 3px;
            border-left: 1px dashed #fff;
            border-right: 1px dashed #fff;
            display: block;
            position: relative;
        }
        span::before{
            content: '';
            height: 10px;
            width: 16px;
            display: block;
            border: 5px solid #333;
            border-bottom: none;
            border-radius: 50px 50px 0 0;
            -webkit-border-radius: 50px 50px 0 0;
            -moz-border-radius: 50px 50px 0 0;
            position: absolute;
            top: -15px;
            left: 6px;
        }
        span::after{
            content: '';
            width: 5px;
            height: 7px;
            background: #fff;
            border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border: 5px;
            position: absolute;
            top: 8px;
            left: 17px;
        }
    </style> 
    <body>
        <span></span>
    </body>

效果圖：

更多例子可以看這里：http://www.uiplayground.in/css3-icons/

原文：

http://dongtianee.sinaapp.com/demo9.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 純css制作的打勾（√）小圖標 Webdings字體、Wingdings字體對照表、用CSS3繪制的各種小圖標 CSS從大圖片上截取小圖標的操作【CSS3】用i標簽用作小圖標關於使用css偽類實現小圖標 css3 小圖標提示特效 CSS之fontAwesome代替網頁icon小圖標純CSS3制作超級漂亮又實用的加載小圖標 css3 向上淡入小圖標翻轉 360度旋轉 Font Awesome-用CSS實現各種小圖標icon