css3实现各种小图标

来源:赵克立博客 分类: HTML5 标签:css发布时间:2018-10-12 14:45:10最后更新:2019-03-22 10:24:11浏览:1722
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2019-03-22 10:24:11
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

加号和减号图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>标题</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
    <style type="text/css">
    .jia,
    .jian {
        width: 15px;
        height: 15px;
        background: #848484;
        border-radius: 100%;
        position: relative;
        display: inline-block;
    }
    .jia:after,
    .jia:before,
    .jian:before {
        position: absolute;
        content: '';
        width: 9px;
        height: 2px;
        background: #fff;
        transform: rotate(0deg);
        top: 6px;
        left: 3px;
    }
    .jia:after {
        transform: rotate(-90deg);
    }
    </style>
</head>
<body>
    <div class="jia"></div>
    <div class="jian"></div>
</body>
</html>

上,下,左,右实心箭头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>标题</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
    <style type="text/css">
    .arrow-up,
    .arrow-down,
    .arrow-left,
    .arrow-right {
        display: inline-block;
        width: 0;
        height: 0;
        border: 8px solid transparent;
    }
    .arrow-up {
        border-bottom-color: #868686;
    }
    .arrow-down {
        border-top-color: #868686;
    }
    .arrow-left {
        border-right-color: #868686;
    }
    .arrow-right {
        border-left-color: #868686;
    }
    </style>
</head>
<body>
    <div class="arrow-up"></div>
    <div class="arrow-down"></div>
    <div class="arrow-left"></div>
    <div class="arrow-right"></div>
</body>
</html>



微信号:kelicom QQ群:215861553 紧急求助须知
Win32/PHP/JS/Android/Python