使用css实现git图标
实现一个简单的图标有好多种形式，这一期咱们来尝试使用纯CSS来实现一下，很有趣哦。
话不多说，咱们直接看最终的效果，然后就一步一步分析实现的具体方法：
分析
开始之前，我们得分析一下这个图标的结构，不然的话也不知道从那里开始下手。乍一看，这个图标还是有些负责。不过，都是由些基本图形组成。仔细分析，一共一个正方形、两条线、三个圆。那么，如果这些基本图形能用CSS实现，最终拼装一下不就可以了吗。好，那么我们的任务就是：
- 实现一个正方形：颜色是橘色，并旋转45deg；
- 实现一条线，上面两个圆，中间一个，尾巴上一个；
- 再实现一条线，尾巴上一个圆；
- 最后把各个图形位置整合一下即可。
开始
经过如上分析，那么我们写起代码来就有头绪了。就开始我们的实现吧。
实现正方形
好吧，这个实在是有些简单，看下面CSS就知道了：
1
2
3
4
5
6
7
8
.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就是再画线之后执行。这样做的好处就是，相对位置比较好找。不过，如果还有一个圆，那就有点不够用了哦。可以再拆分一条线哈哈。
好，说了这么多，看最终的代码吧：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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的。来，看实现的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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。希望通过今天的分享大家都有所收获，下期再见。
