今天我們要帶大家用 CSS 來畫 UniSharp 的 LOGO

首先我們先分析 LOGO,可以分成兩組,每組是一個字母 U 加一個 Bar

分析完了之後,就可以把 HTML 設計出來了

1
2
3
4
5
6
.logo
.wrapper
.u.left
.bar
.u.right
.bar

再來就是今天的重頭戲,要來用 CSS 畫畫了!

先畫出字母 U

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.u {
height: 100px;
border-width: 0 47px;
&, &:before {
width: 172px;
border-style: solid;
border-color: white;
}
&:before {
content: '';
position: absolute;
height: 117px;
border-width: 47px;
border-top-width: 0;
left: -47px;
bottom: -115px;
border-radius: 0 0 100px 100px;
}
}

再把兩個 U 轉一下並組合起來,歐~已經有個樣子了唷!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrapper {
position: relative;
}
.u {
&.left {
transform: rotate(45deg);
left: 60px;
top: 40px;
}
&.right {
transform: rotate(-135deg);
left: 167px;
top: 10px;
}
}

然後把兩個 bar 放上去

1
2
3
4
5
6
7
8
9
.bar {
width: 48px;
height: 93px;
background-color: white;
transform: rotate(90deg) skewX(10deg);
position: absolute;
top: -31px;
left: -24px;
}

再微調一下角度,大功告成

1
2
3
4
.logo {
position: relative;
transform: rotate(-7deg) skewX(-1deg);
}

完整的程式碼請點我