【CSS】用CSS绘制图标（图标大全）

最新推荐文章于 2023-12-15 11:58:25 发布

码婆Doph

最新推荐文章于 2023-12-15 11:58:25 发布

阅读量2.4w

点赞数 23

分类专栏：原创 css

本文链接：https://blog.csdn.net/liu_jiachen/article/details/78634457

版权

原创同时被 2 个专栏收录

58 篇文章 3 订阅

订阅专栏

css

14 篇文章 0 订阅

订阅专栏

转载请务必注明出处，也不枉我这么辛苦打上来。谢谢啦！
技艺不精，若有纰漏，还请不吝指出。

暂停按钮

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

加号按钮

            .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>

关闭按钮

        <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>

菜单按钮

用阴影实现

        <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>

用背景裁剪实现

        <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>

文章图标

            <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: 16px;
                    height: 16px;
                    background-color: black;
                    border-radius: 100%;
                    box-shadow: 0 0 0 5px #fff,0 0 0 10px #000;
                }
            </style>

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

        </body>

            <style>
                .box{
                    width: 16px;
                    height: 16px;
                    padding: 7px;
                    border: 3px solid green;
                    border-radius: 100%;
                    background-clip: content-box;
                    background-color: green;
                }
            </style>

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

        </body>

靶子图标

这里写图片描述

            <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>

田字图标

.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;
                }

下载箭头

这里写图片描述

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

下载箭头(带横线)

这里写图片描述

.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;
                }

禁用图标

.box{
                    width: 20px;
                    height: 20px;
                    border-radius: 100%;
                    border: 2px solid #000000;
                    background: linear-gradient(to right,#ffffff 45%,#000000 45%,#000 55%,#fff 55%);
                    transform:rotate(40deg);
                }

还有很多的图标等待大家去开发，我这列举几个常用的而已，抛砖引玉。有什么好的图标，还希望大家在博文下回复讨论。
谢谢。
挚谢阅读。

码婆Doph

关注

23
点赞
踩
85

收藏

觉得还不错? 一键收藏
0
评论
【CSS】用CSS绘制图标（图标大全）

转载请务必注明出处，也不枉我这么辛苦打上来。谢谢啦！技艺不精，若有纰漏，还请不吝指出。暂停按钮 <style> .box{ width: 50px; height: 50px; background-color: white; border: 1px solid blac
复制链接

扫一扫