css伪元素实现宝马logo

发表于 | 分类于 |

前言

今天去360奇舞团面试前端了，让做了几道题，凭心而论题出的还是很简单的。跟面试官谈的感觉还不错。偏偏博主脑子被驴踢了，一道css优先级的简单到掉渣的题目竟然答错了，真是日了狗了，我真是傻逼到无极限，估计应该是被鄙视了。不过其中一道题目拿来当笔试题还是挺好的，就是css实现类似宝马logo，以前写过太极阴阳图类似的css，就套着写了。

思路

1、生成一个宽高200px的圆，背景白色。
2、设置容器的overflow为hidden隐藏多余的色块，position为relative。
3、设置伪元素为宽高100px的方块并且绝对定位，背景颜色蓝色，作为色块填充。
4、after设置left:100px,top:100px。

代码

1
<div id="ball"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#ball{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #F5F6FC;
    border: 1px solid #111010;
    overflow: hidden;
    position: relative;
}
#ball:before,#ball:after{
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: #2D9CDB;
}
#ball:after{
    left: 100px;
    top: 100px;
}

延伸

既然完成了以上的代码，不如就直接写出个完整的logo，先看一下效果

1
2
3
4
5
6
7
8
<div class="outer">
    <div class="letters">
        <span class="letter">B</span>
        <span class="letter">M</span>
        <span class="letter">W</span>
    </div>
    <div class="inner"></div>
</div>
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.outer{
    height: 300px;
    width: 300px;
    position: relative;
    border-radius: 50%;
    background: #111010;
    border: 6px solid #a6a6a7;
}
.letters{
    position: absolute;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 40px;
}
.letter{
    font-weight: bold;
    text-shadow: 1px 2px 3px #a6a6a7;
}
.letter:first-child{
    transform: rotate(-45deg);
    position: absolute;
    left: 40px;
    top: 40px;
}
.letter:last-child{
    transform: rotate(45deg);
    position: absolute;
    left: 220px;
    top: 40px;
}
.inner{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #F5F6FC;
    overflow: hidden;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: relative;
}
.inner:before,.inner:after{
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: #2D9CDB;
}
.inner:after{
    left: 100px;
    top: 100px;
}