用css画图标

于 2020-06-28 14:32:15 发布
阅读量327 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/devincob/article/details/106998231
版权

css3的属性 transform(转换) 用途很广泛，功能也很强大，为了熟悉它的各种转换方式(平移 translate，旋转 rotate，扭曲 skew，放缩 scale)，我做了一些平常常用的一些简单的图标。
这些图标很多是通过三角形来拼贴起来的，所以我们需要知道怎么样画三角形。
前人栽树：用css画图标原文链接

  1. 我们要将该 div 的 width 和 height 都设置为 0，三角形是通过设置 border 来实现；
  2. 通过我们需要画成的三角形的目标分析，这个三角形的朝向(只针对规则的朝向：上、右、下、左、上左、上右、下右、下左，不规则的朝向可以通过旋转来实现)；
  3. 如果是上、右、下、左四种中的一种，将朝向的对面的 border-color 设置为我们需要的颜色，该朝向的这一边不设置 border，其它两边的 border-color 设置为 transparent；
  4. 如果是上左、上右、下右、下左中的一种，以上右为例，设置相关的两边：上和右的 border-color 设置成我们想要的颜色，其它两边的 border-width 设置成 transparent。
  5. border-width 的值就是底边长和高。
    后记：防丢失
    看几个例子：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        div {
            margin-left:50px;
            margin-top:50px;
        }
        .top {
            width:0;
            height:0;
            border-bottom:2em solid #000;
            border-right:1.8em solid transparent;
            border-left:1.8em solid transparent;
        }
        .bottom {
            width:0;
            height:0;
            border-top:2em solid #000;
            border-right:1.8em solid transparent;
            border-left:1.8em solid transparent;
        }
        .left {
            width:0;
            height:0;
            border-left:2em solid #000;
            border-bottom:1.8em solid transparent;
            border-top:1.8em solid transparent;
        }
        .right {
            width:0;
            height:0;
            border-right:2em solid #000;
            border-bottom:1.8em solid transparent;
            border-top:1.8em solid transparent;
        }
        .bottomLeft {
            width:0;
            height:0;
            border-width:2em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
        }
        .bottomLeftRotate {
            width:0;
            height:0;
            border-width:2em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
            transform:rotate(60deg);
        }
        .up {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-right:.9em solid transparent;
            border-bottom:.9em solid #000;
            border-left:.9em solid transparent;
        }
        .up:after {
            content:"";
            position:absolute;
            left:50%;
            top:.7em;
            margin-left:-.45em;
            /*宽度的一半，结合 left:50%;
            使用*/
            width:.9em;
            height:1.3em;
            background-color:#000;
        }
        .up_right {
            box-sizing:border-box;
            position:relative;
            width:1.3em;
            height:.9em;
            background-color:#000;
        }
        .up_right:after {
            content:"";
            position:absolute;
            top:50%;
            left:1.1em;
            margin-top:-.9em;
            width:0;
            height:0;
            border-top:.9em solid transparent;
            border-bottom:.9em solid transparent;
            border-left:.9em solid #000;
        }
        .up_bottom {
            box-sizing:border-box;
            position:relative;
            width:.9em;
            height:1.3em;
            background-color:#000;
        }
        .up_bottom:after {
            content:"";
            position:absolute;
            left:50%;
            top:1.1em;
            margin-left:-.9em;
            width:0;
            height:0;
            border-right:.9em solid transparent;
            border-top:.9em solid #000;
            border-left:.9em solid transparent;
        }
        .up_left {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-top:.9em solid transparent;
            border-right:.9em solid #000;
            border-bottom:.9em solid transparent;
        }
        .up_left:after {
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            /*在绝对定位中，top:0;
            bottom:0;
            margin:auto;
            结合使用能竖直居中*/
            left:.7em;
            margin:auto;
            width:1.3em;
            height:.9em;
            background-color:#000;
        }
        .true {
            display:inline-block;
            width:20px;
            height:15px;
            background:black;
            line-height:0;
            font-size:0;
            vertical-align:middle;
            -webkit-transform:rotate(45deg);
        }
        .true:after {
            content:'/';
            display:block;
            width:50px;
            height:15px;
            background:black;
            -webkit-transform:rotate(-90deg) translateY(-5%) translateX(35%);
        }
        .true_one {
            position:relative;
            width:1.2em;
            height:.3em;
            background-color:#000;
            transform:rotate(60deg);
            transform-origin:right center;
            border-radius:.15em;
        }
        .true_one:after {
            content:"";
            position:absolute;
            top:.1em;
            left:-.85em;
            width:2em;
            height:.3em;
            background-color:#000;
            transform:rotate(60deg);
            transform-origin:right center;
            border-radius:.15em;
        }
        .false {
            position:relative;
            width:2em;
            height:.3em;
            background-color:#000;
            transform:rotate(45deg);
            border-radius:.15em;
        }
        .false:after {
            content:"";
            position:absolute;
            width:2em;
            height:.3em;
            background-color:#000;
            transform:rotate(90deg);
            border-radius:.15em;
        }
        .menu {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            background-color:#000;
            border-radius:.3em;
        }
        .menu:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:1.2em;
            height:.15em;
            background-color:#fff;
        }
        .menu:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:1.2em;
            height:.9em;
            border-width:.15em;
            border-style:solid none;
            border-color:#fff;
        }
        .menu2 {
            box-sizing:border-box;
            position:relative;
            width:.5em;
            height:.5em;
            background-color:#000;
            border-radius:50%;
            cursor:pointer;
        }
        .menu2:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            left:-.75em;
            width:.5em;
            height:.5em;
            background-color:#000;
            border-radius:50%;
        }
        .menu2:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            left:.75em;
            width:.5em;
            height:.5em;
            background-color:#000;
            border-radius:50%;
        }
        .download {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:.8em;
            border-width:.3em;
            border-style:none solid solid;
            border-color:#000;
        }
        .download:before {
            content:"";
            position:absolute;
            right:0;
            bottom:.7em;
            left:0;
            margin:auto;
            width:.3em;
            height:1em;
            background-color:#000;
        }
        .download:after {
            content:"";
            position:absolute;
            right:0;
            bottom:.2em;
            left:0;
            margin:auto;
            width:0;
            height:0;
            border-right:.6em solid transparent;
            border-top:.6em solid #000;
            border-left:.6em solid transparent;
        }
        .upload {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:.8em;
            border-width:.3em;
            border-style:none solid solid;
            border-color:#000;
        }
        .upload:before {
            content:"";
            position:absolute;
            right:0;
            bottom:.2em;
            left:0;
            margin:auto;
            width:.3em;
            height:1em;
            background-color:#000;
        }
        .upload:after {
            content:"";
            position:absolute;
            right:0;
            bottom:1.1em;
            left:0;
            margin:auto;
            width:0;
            height:0;
            border-right:.6em solid transparent;
            border-bottom:.6em solid #000;
            border-left:.6em solid transparent;
        }
        .video {
            box-sizing:border-box;
            position:relative;
            width:1.5em;
            height:1.2em;
            background-color:#000;
            border-radius:.3em;
        }
        .video:after {
            content:"";
            position:absolute;
            top:50%;
            left:1.4em;
            margin-top:-.7em;
            width:0;
            height:0;
            border-top:.7em solid transparent;
            border-right:.6em solid #000;
            border-bottom:.7em solid transparent;
        }
        .voice {
            box-sizing:border-box;
            position:relative;
            width:1.4em;
            height:1em;
            border-width:.2em;
            border-style:none none solid;
            border-color:#000;
            border-radius:50%;
        }
        .voice:before {
            content:"";
            position:absolute;
            right:0;
            left:0;
            bottom:.05em;
            margin:auto;
            width:.8em;
            height:1.3em;
            background-color:#000;
            border-radius:.4em;
        }
        .voice:after {
            content:"";
            position:absolute;
            right:0;
            bottom:-.6em;
            left:0;
            margin:auto;
            width:0;
            height:0;
            border-right:.6em solid transparent;
            border-bottom:.4em solid #000;
            border-left:.6em solid transparent;
        }
        .play {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .play:after {
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.3em;
            /*没有让其左右居中，因为看起来右边更空一些*/
            width:0;
            height:0;
            border-top:.6em solid transparent;
            border-bottom:.6em solid transparent;
            border-left:.9em solid #000;
        }
        .pause {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .pause:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.35em;
            width:.2em;
            height:.9em;
            background-color:#000;
        }
        .pause:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:.15em;
            width:.2em;
            height:.9em;
            background-color:#000;
        }
        .previous {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .previous:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.65em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-right:.6em solid #000;
        }
        .previous:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.2em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-right:.6em solid #000;
        }
        .next {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .next:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.4em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-left:.6em solid #000;
        }
        .next:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:.05em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-left:.6em solid #000;
        }
        .stop {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .stop:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.9em;
            height:.9em;
            background-color:#000;
        }
        .position {
            position:relative;
            width:.6em;
            height:.6em;
            border:.4em solid #000;
            border-radius:50%;
        }
        .position:after {
            content:"";
            position:absolute;
            top:.55em;
            left:-.4em;
            width:0;
            height:0;
            border-top:1em solid #000;
            border-right:.7em solid transparent;
            border-left:.7em solid transparent;
            border-top-left-radius:50%;
            border-top-right-radius:50%;
        }
        .pc {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:1.4em;
            border-width:.2em .2em .3em;
            border-style:solid;
            border-color:#000;
            border-radius:.2em;
            background-color:#efefef;
        }
        .pc:before {
            content:"";
            position:absolute;
            top:1.2em;
            right:0;
            left:0;
            margin:auto;
            width:.6em;
            height:.4em;
            background-color:#000;
        }
        .pc:after {
            content:"";
            position:absolute;
            top:1.6em;
            right:0;
            left:0;
            margin:auto;
            width:1.6em;
            height:.2em;
            background-color:#000;
        }
        .phone {
            box-sizing:border-box;
            position:relative;
            width:1.4em;
            height:2em;
            background-color:#efefef;
            border-width:.3em .2em .5em;
            border-style:solid;
            border-color:#000;
            border-radius:.15em;
        }
        .phone:after {
            content:"";
            position:absolute;
            right:0;
            bottom:-.4em;
            left:0;
            margin:auto;
            width:.5em;
            height:.3em;
            background-color:#fff;
            border-radius:.3em;
        }
        .search {
            box-sizing:border-box;
            position:relative;
            width:1em;
            height:.3em;
            background-color:#000;
            border-top-right-radius:.15em;
            border-bottom-right-radius:.15em;
            transform:rotate(40deg);
            transform-origin:right center;
        }
        .search:before {
            content:"";
            position:absolute;
            left:-1.3em;
            bottom:-.6em;
            width:1em;
            height:1em;
            border:.3em solid #000;
            border-radius:50%;
        }
        .star {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-top:.7em solid #000;
            border-right:1em solid transparent;
            border-left:1em solid transparent;
        }
        .star:before {
            content:"";
            position:absolute;
            top:-.7em;
            left:-1em;
            width:0;
            height:0;
            border-top:.7em solid #000;
            border-right:1em solid transparent;
            border-left:1em solid transparent;
            transform:rotate(72deg);
        }
        .star:after {
            content:"";
            position:absolute;
            top:-.7em;
            left:-1em;
            width:0;
            height:0;
            border-top:.7em solid #000;
            border-right:1em solid transparent;
            border-left:1em solid transparent;
            transform:rotate(-72deg);
        }
        .email {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-width:.7em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
        }
        .email:before {
            content:"";
            position:absolute;
            top:-.7em;
            left:1em;
            transform:rotateY(180deg);
            transform-origin:left center;
            width:0;
            height:0;
            border-width:.7em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
        }
        .email:after {
            content:"";
            position:absolute;
            top:-.7em;
            left:50%;
            margin-left:-.9em;
            width:0;
            height:0;
            border-top:.6em solid #000;
            border-right:.9em solid transparent;
            border-left:.9em solid transparent;
        }
        .eye {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:1.2em;
            background-color:#000;
            border-radius:50%;
        }
        .eye:before {
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.8em;
            height:.8em;
            background-color:#fff;
            border-radius:50%;
        }
        .eye:after {
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.4em;
            height:.4em;
            background-color:#000;
            border-radius:50%;
        }
        .unlock {
            box-sizing:border-box;
            position:relative;
            width:1.6em;
            height:1.4em;
            background-color:#000;
            border-radius:.2em;
        }
        .unlock:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:-.4em;
            right:-.4em;
            width:1em;
            height:.6em;
            border-width:.2em;
            border-style:solid solid none;
            border-color:#000;
            border-radius:.5em;
        }
        .unlock:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            bottom:.2em;
            left:50%;
            margin-left:-.15em;
            width:.3em;
            height:.5em;
            border-top-left-radius:.25em;
            border-top-right-radius:.25em;
            background-color:#fff;
        }
        .cup {
            box-sizing:border-box;
            position:relative;
            width:1.3em;
            height:2em;
            border-width:.2em .2em 1.2em;
            border-style:solid;
            border-color:#000;
            background-color:#efefef;
            border-bottom-left-radius:.3em;
            border-bottom-right-radius:.3em;
        }
        .cup:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:.1em;
            left:-.7em;
            width:.7em;
            height:1.4em;
            border-width:.2em;
            border-style:solid;
            border-color:#000;
            border-top-left-radius:.3em;
            border-bottom-left-radius:.3em;
        }
        .heart {
            position:relative;
            width:1.4em;
            height:2em;
            background-color:#000;
            border-top-left-radius:1em;
            border-top-right-radius:1em;
            transform:rotate(-45deg);
            transform-origin:center bottom;
        }
        .heart:after {
            content:"";
            position:absolute;
            top:-.7em;
            left:-.7em;
            width:1.4em;
            height:2em;
            background-color:#000;
            border-top-left-radius:1em;
            border-top-right-radius:1em;
            transform:rotate(90deg);
            transform-origin:center bottom;
        }
        .home {
            box-sizing:border-box;
            position:relative;
            width:1.4em;
            height:1em;
            background-color:#000;
        }
        .home:before {
            content:"";
            position:absolute;
            top:-.7em;
            left:50%;
            margin-left:-1em;
            border-left:1em solid transparent;
            border-right:1em solid transparent;
            border-bottom:.8em solid #000;
        }
        .home:after {
            z-index:2;
            content:"";
            position:absolute;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.3em;
            height:.5em;
            background-color:#fff;
        }
        .password {
            box-sizing:border-box;
            position:relative;
            width:1.8em;
            height:1.4em;
            background-color:#000;
            border-radius:.2em;
        }
        .password:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:-.6em;
            left:50%;
            margin-left:-.5em;
            width:1em;
            height:1em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .password:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            bottom:.2em;
            left:50%;
            margin-left:-.15em;
            width:.3em;
            height:.5em;
            border-top-left-radius:.25em;
            border-top-right-radius:.25em;
            background-color:#fff;
        }
        .user {
            box-sizing:border-box;
            position:relative;
            width:.9em;
            height:.9em;
            background-color:#000;
            border-radius:50%;
        }
        .user:after {
            content:"";
            position:absolute;
            top:1em;
            left:50%;
            margin-left:-.9em;
            width:1.8em;
            height:1em;
            background-color:#000;
            border-top-left-radius:.9em;
            border-top-right-radius:.9em;
        }

    </style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottomLeft"></div>
<div class="bottomLeftRotate"></div>
<div class="up"></div>
<div class="up_bottom"></div>
<div class="up_right"></div>
<div class="up_left"></div>
<div class="true"></div>
<div class="true_one"></div>
<div class="false"></div>
<div class="menu"></div>
<div class="menu2"></div>
<div class="download"></div>
<div class="upload"></div>
<div class="video"></div>
<div class="voice"></div>
<div class="play"></div>
<div class="pause"></div>
<div class="previous"></div>
<div class="next"></div>
<div class="stop"></div>
<div class="position"></div>
<div class="pc"></div>
<div class="phone"></div>
<div class="search"></div>
<div class="star"></div>
<div class="email"></div>
<div class="eye"></div>
<div class="unlock"></div>
<div class="cup"></div>
<div class="heart"></div>
<div class="home"></div>
<div class="password"></div>
<div class="user"></div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script></script>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值