编程-学习-思考

使用css实现git图标

实现一个简单的图标有好多种形式，这一期咱们来尝试使用纯CSS来实现一下，很有趣哦。

话不多说，咱们直接看最终的效果，然后就一步一步分析实现的具体方法：

分析

开始之前，我们得分析一下这个图标的结构，不然的话也不知道从那里开始下手。乍一看，这个图标还是有些负责。不过，都是由些基本图形组成。仔细分析，一共一个正方形、两条线、三个圆。那么，如果这些基本图形能用CSS实现，最终拼装一下不就可以了吗。好，那么我们的任务就是：

实现一个正方形：颜色是橘色，并旋转45deg；
实现一条线，上面两个圆，中间一个，尾巴上一个；
再实现一条线，尾巴上一个圆；
最后把各个图形位置整合一下即可。

开始

经过如上分析，那么我们写起代码来就有头绪了。就开始我们的实现吧。

实现正方形

好吧，这个实在是有些简单，看下面CSS就知道了：

.git-logo {
    height: 150px;
    width: 150px;
    background-color: #f06033;
    border-radius: 15px;
    position: relative;
    transform: rotate(45deg);
}

长宽一样 150px，然后背景橘黄色，指定边框圆角15px，然后再旋转45deg，最终第一步就完美完成了：

实现第一条线+两个圆

线好实现，就相当于一个长方形吗。圆的实现方法应该有好多种吧，我们这里用指定边框圆角的方式来完成。就是把 border-radius 指定成正方形边长的一半，轻松搞定。

不过，还有最后一个困难，就是指定两个圆和这条线的相对关系。这里我们采用伪元素::before 和::after，来指定。顾名思义，before 就是再画线之前就开始执行，after就是再画线之后执行。这样做的好处就是，相对位置比较好找。不过，如果还有一个圆，那就有点不够用了哦。可以再拆分一条线哈哈。

好，说了这么多，看最终的代码吧：

.line1 {
    width: 110px;
    background-color: white;
    height: 10px;
    top: 40px;
    position: absolute;
}

.line1::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    top: -8px;
    left: 30px;
}

.line1::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    top: -8px;
    left: 90px;
}

来看看到目前为止的效果吧，是不是有点那意思了。

实现第二条线+一个圆

有了第一条线的经验，那么第二条实现起来也不是什么难事。模仿一下，稍微修改一下参数即可。不过，考虑到第二条线的相对位置，那还是要旋转45deg的。来，看实现的代码：

.line2 {
    width: 90px;
    background-color: white;
    height: 12px;
    top: 70px;
    left: 30px;
    position: absolute;
    transform: rotate(45deg);
}

.line2::after {
    content: "";
    width: 30px;
    background-color: white;
    height: 30px;
    border-radius: 50%;
    top: -8px;
    left: 70px;
    position: absolute;
}

因为只有一个圆，在 before 或 after 实现都是可以的。

那好，最后再看一下我们的成果吧，是不是看起来比之前多了几分灵气。

结语

好了，今天就分享到这里，后期带来更多的图标CSS。希望通过今天的分享大家都有所收获，下期再见。

16 Jan 2023

csslearn