css3
的属性 transform
(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate
,旋转 rotate
,扭曲 skew
,放缩 scale
),我做了一些平常常用的一些简单的图标。
这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形。
- 我们要将该
div
的 width
和 height
都设置为 0,三角形是通过设置 border
来实现;
- 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上、右、下、左、上左、上右、下右、下左,不规则的朝向可以通过旋转来实现);
- 如果是上、右、下、左四种中的一种,将朝向的对面的
border-color
设置为我们需要的颜色,该朝向的这一边不设置 border
,其它两边的 border-color
设置为 transparent
;
- 如果是上左、上右、下右、下左中的一种,以上右为例,设置相关的两边:上和右的
border-color
设置成我们想要的颜色,其它两边的 border-width
设置成 transparent
。
border-width
的值就是底边长和高。
三角形
![三角形1]()
1 2 3 4 5 6 7
| .bottom { width: 0; height: 0; border-top: 2em solid #000; border-right: 1.8em solid transparent; border-left: 1.8em solid transparent; }
|
![三角形2]()
1 2 3 4 5 6 7
| .bottomLeft { width: 0; height: 0; border-width: 2em 1em; border-style: solid; border-color: transparent transparent #000 #000; }
|
![三角形3]()
1 2 3 4 5 6 7 8
| .bottomLeftRotate { width: 0; height: 0; border-width: 2em 1em; border-style: solid; border-color: transparent transparent #000 #000; transform: rotate(60deg); }
|
向上
![向上]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| .top { box-sizing: border-box; position: relative; width: 0; height: 0; border-right: 0.9em solid transparent; border-bottom: 0.9em solid #000; border-left: 0.9em solid transparent; } .top:after { content: ''; position: absolute; left: 50%; top: 0.7em; margin-left: -0.45em; width: 0.9em; height: 1.3em; background-color: #000; }
|
向右
![向右]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| .right { box-sizing: border-box; position: relative; width: 1.3em; height: 0.9em; background-color: #000; } .right:after { content: ''; position: absolute; top: 50%; left: 1.1em; margin-top: -0.9em; width: 0; height: 0; border-top: 0.9em solid transparent; border-bottom: 0.9em solid transparent; border-left: 0.9em solid #000; }
|
向下
![向下]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| .bottom { box-sizing: border-box; position: relative; width: 0.9em; height: 1.3em; background-color: #000; } .bottom:after { content: ''; position: absolute; left: 50%; top: 1.1em; margin-left: -0.9em; width: 0; height: 0; border-right: 0.9em solid transparent; border-top: 0.9em solid #000; border-left: 0.9em solid transparent; }
|
向左
![向左]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .left { box-sizing: border-box; position: relative; width: 0; height: 0; border-top: 0.9em solid transparent; border-right: 0.9em solid #000; border-bottom: 0.9em solid transparent; } .left:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0.7em; margin: auto; width: 1.3em; height: 0.9em; background-color: #000; }
|
正确
![正确]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| .true { position: relative; width: 1.2em; height: 0.3em; background-color: #000; transform: rotate(60deg); transform-origin: right center; border-radius: 0.15em; } .true:after { content: ''; position: absolute; top: 0.1em; left: -0.85em; width: 2em; height: 0.3em; background-color: #000; transform: rotate(60deg); transform-origin: right center; border-radius: 0.15em; }
|
错误
![错误]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .false { position: relative; width: 2em; height: 0.3em; background-color: #000; transform: rotate(45deg); border-radius: 0.15em; } .false:after { content: ''; position: absolute; width: 2em; height: 0.3em; background-color: #000; transform: rotate(90deg); border-radius: 0.15em; }
|
菜单
![菜单]()
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
| .menu { box-sizing: border-box; position: relative; width: 2em; height: 2em; background-color: #000; border-radius: 0.3em; } .menu:before { box-sizing: border-box; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 1.2em; height: 0.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: 0.9em; border-width: 0.15em; border-style: solid none; border-color: #fff; }
|
菜单 2
![菜单 2]()
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
| .menu2 { box-sizing: border-box; position: relative; width: 0.5em; height: 0.5em; background-color: #000; border-radius: 50%; cursor: pointer; } .menu2:before { box-sizing: border-box; content: ''; position: absolute; top: 0; left: -0.75em; width: 0.5em; height: 0.5em; background-color: #000; border-radius: 50%; } .menu2:after { box-sizing: border-box; content: ''; position: absolute; top: 0; left: 0.75em; width: 0.5em; height: 0.5em; background-color: #000; border-radius: 50%; }
|
下载
![下载]()
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
| .download { box-sizing: border-box; position: relative; width: 2em; height: 0.8em; border-width: 0.3em; border-style: none solid solid; border-color: #000; } .download:before { content: ''; position: absolute; right: 0; bottom: 0.7em; left: 0; margin: auto; width: 0.3em; height: 1em; background-color: #000; } .download:after { content: ''; position: absolute; right: 0; bottom: 0.2em; left: 0; margin: auto; width: 0; height: 0; border-right: 0.6em solid transparent; border-top: 0.6em solid #000; border-left: 0.6em solid transparent; }
|
上传
![上传]()
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
| .upload { box-sizing: border-box; position: relative; width: 2em; height: 0.8em; border-width: 0.3em; border-style: none solid solid; border-color: #000; } .upload:before { content: ''; position: absolute; right: 0; bottom: 0.2em; left: 0; margin: auto; width: 0.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: 0.6em solid transparent; border-bottom: 0.6em solid #000; border-left: 0.6em solid transparent; }
|
视频
![视频]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .video { box-sizing: border-box; position: relative; width: 1.5em; height: 1.2em; background-color: #000; border-radius: 0.3em; } .video:after { content: ''; position: absolute; top: 50%; left: 1.4em; margin-top: -0.7em; width: 0; height: 0; border-top: 0.7em solid transparent; border-right: 0.6em solid #000; border-bottom: 0.7em solid transparent; }
|
语音
![语音]()
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
| .voice { box-sizing: border-box; position: relative; width: 1.4em; height: 1em; border-width: 0.2em; border-style: none none solid; border-color: #000; border-radius: 50%; } .voice:before { content: ''; position: absolute; right: 0; left: 0; bottom: 0.05em; margin: auto; width: 0.8em; height: 1.3em; background-color: #000; border-radius: 0.4em; } .voice:after { content: ''; position: absolute; right: 0; bottom: -0.6em; left: 0; margin: auto; width: 0; height: 0; border-right: 0.6em solid transparent; border-bottom: 0.4em solid #000; border-left: 0.6em solid transparent; }
|
播放
![播放]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| .play { box-sizing: border-box; position: relative; width: 2em; height: 2em; border: 0.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: -0.3em; width: 0; height: 0; border-top: 0.6em solid transparent; border-bottom: 0.6em solid transparent; border-left: 0.9em solid #000; }
|
暂停
![暂停]()
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
| .pause { box-sizing: border-box; position: relative; width: 2em; height: 2em; border: 0.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: -0.35em; width: 0.2em; height: 0.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: 0.15em; width: 0.2em; height: 0.9em; background-color: #000; }
|
上一首(集)
![上一首(集)]()
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
| .previous { box-sizing: border-box; position: relative; width: 2em; height: 2em; border: 0.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: -0.65em; width: 0; height: 0; border-top: 0.45em solid transparent; border-bottom: 0.45em solid transparent; border-right: 0.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: -0.2em; width: 0; height: 0; border-top: 0.45em solid transparent; border-bottom: 0.45em solid transparent; border-right: 0.6em solid #000; }
|
下一首(集)
![下一首(集)]()
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
| .next { box-sizing: border-box; position: relative; width: 2em; height: 2em; border: 0.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: -0.4em; width: 0; height: 0; border-top: 0.45em solid transparent; border-bottom: 0.45em solid transparent; border-left: 0.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: 0.05em; width: 0; height: 0; border-top: 0.45em solid transparent; border-bottom: 0.45em solid transparent; border-left: 0.6em solid #000; }
|
停止
![停止]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| .stop { box-sizing: border-box; position: relative; width: 2em; height: 2em; border: 0.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: 0.9em; height: 0.9em; background-color: #000; }
|
当前位置
![当前位置]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .position { position: relative; width: 0.6em; height: 0.6em; border: 0.4em solid #000; border-radius: 50%; } .position:after { content: ''; position: absolute; top: 0.55em; left: -0.4em; width: 0; height: 0; border-top: 1em solid #000; border-right: 0.7em solid transparent; border-left: 0.7em solid transparent; border-top-left-radius: 50%; border-top-right-radius: 50%; }
|
pc
![pc]()
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
| .pc { box-sizing: border-box; position: relative; width: 2em; height: 1.4em; border-width: 0.2em 0.2em 0.3em; border-style: solid; border-color: #000; border-radius: 0.2em; background-color: #efefef; } .pc:before { content: ''; position: absolute; top: 1.2em; right: 0; left: 0; margin: auto; width: 0.6em; height: 0.4em; background-color: #000; } .pc:after { content: ''; position: absolute; top: 1.6em; right: 0; left: 0; margin: auto; width: 1.6em; height: 0.2em; background-color: #000; }
|
phone
![phone]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| .phone { box-sizing: border-box; position: relative; width: 1.4em; height: 2em; background-color: #efefef; border-width: 0.3em 0.2em 0.5em; border-style: solid; border-color: #000; border-radius: 0.15em; } .phone:after { content: ''; position: absolute; right: 0; bottom: -0.4em; left: 0; margin: auto; width: 0.5em; height: 0.3em; background-color: #fff; border-radius: 0.3em; }
|
搜索
![搜索]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| .search { box-sizing: border-box; position: relative; width: 1em; height: 0.3em; background-color: #000; border-top-right-radius: 0.15em; border-bottom-right-radius: 0.15em; transform: rotate(40deg); transform-origin: right center; } .search:before { content: ''; position: absolute; left: -1.3em; bottom: -0.6em; width: 1em; height: 1em; border: 0.3em solid #000; border-radius: 50%; }
|
五角星
![五角星]()
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
| .star { box-sizing: border-box; position: relative; width: 0; height: 0; border-top: 0.7em solid #000; border-right: 1em solid transparent; border-left: 1em solid transparent; } .star:before { content: ''; position: absolute; top: -0.7em; left: -1em; width: 0; height: 0; border-top: 0.7em solid #000; border-right: 1em solid transparent; border-left: 1em solid transparent; transform: rotate(72deg); } .star:after { content: ''; position: absolute; top: -0.7em; left: -1em; width: 0; height: 0; border-top: 0.7em solid #000; border-right: 1em solid transparent; border-left: 1em solid transparent; transform: rotate(-72deg); }
|
电子邮件
![电子邮件]()
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
| .email { box-sizing: border-box; position: relative; width: 0; height: 0; border-width: 0.7em 1em; border-style: solid; border-color: transparent transparent #000 #000; } .email:before { content: ''; position: absolute; top: -0.7em; left: 1em; transform: rotateY(180deg); transform-origin: left center; width: 0; height: 0; border-width: 0.7em 1em; border-style: solid; border-color: transparent transparent #000 #000; } .email:after { content: ''; position: absolute; top: -0.7em; left: 50%; margin-left: -0.9em; width: 0; height: 0; border-top: 0.6em solid #000; border-right: 0.9em solid transparent; border-left: 0.9em solid transparent; }
|
眼睛
![眼睛]()
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
| .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: 0.8em; height: 0.8em; background-color: #fff; border-radius: 50%; } .eye:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 0.4em; height: 0.4em; background-color: #000; border-radius: 50%; }
|
未锁
![未锁]()
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
| .unlock { box-sizing: border-box; position: relative; width: 1.6em; height: 1.4em; background-color: #000; border-radius: 0.2em; } .unlock:before { box-sizing: border-box; content: ''; position: absolute; top: -0.4em; right: -0.4em; width: 1em; height: 0.6em; border-width: 0.2em; border-style: solid solid none; border-color: #000; border-radius: 0.5em; } .unlock:after { box-sizing: border-box; content: ''; position: absolute; bottom: 0.2em; left: 50%; margin-left: -0.15em; width: 0.3em; height: 0.5em; border-top-left-radius: 0.25em; border-top-right-radius: 0.25em; background-color: #fff; }
|
杯子
![杯子]()
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
| .cup { box-sizing: border-box; position: relative; width: 1.3em; height: 2em; border-width: 0.2em 0.2em 1.2em; border-style: solid; border-color: #000; background-color: #efefef; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; } .cup:before { box-sizing: border-box; content: ''; position: absolute; top: 0.1em; left: -0.7em; width: 0.7em; height: 1.4em; border-width: 0.2em; border-style: solid; border-color: #000; border-top-left-radius: 0.3em; border-bottom-left-radius: 0.3em; }
|
心
![心]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| .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: -0.7em; left: -0.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; }
|
主页
![主页]()
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
| .home { box-sizing: border-box; position: relative; width: 1.4em; height: 1em; background-color: #000; } .home:before { content: ''; position: absolute; top: -0.7em; left: 50%; margin-left: -1em; border-left: 1em solid transparent; border-right: 1em solid transparent; border-bottom: 0.8em solid #000; } .home:after { z-index: 2; content: ''; position: absolute; right: 0; bottom: 0; left: 0; margin: auto; width: 0.3em; height: 0.5em; background-color: #fff; }
|
密码
![密码]()
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
| .password { box-sizing: border-box; position: relative; width: 1.8em; height: 1.4em; background-color: #000; border-radius: 0.2em; } .password:before { box-sizing: border-box; content: ''; position: absolute; top: -0.6em; left: 50%; margin-left: -0.5em; width: 1em; height: 1em; border: 0.2em solid #000; border-radius: 50%; } .password:after { box-sizing: border-box; content: ''; position: absolute; bottom: 0.2em; left: 50%; margin-left: -0.15em; width: 0.3em; height: 0.5em; border-top-left-radius: 0.25em; border-top-right-radius: 0.25em; background-color: #fff; }
|
用户(账号)
![用户(账号)]()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .user { box-sizing: border-box; position: relative; width: 0.9em; height: 0.9em; background-color: #000; border-radius: 50%; } .user:after { content: ''; position: absolute; top: 1em; left: 50%; margin-left: -0.9em; width: 1.8em; height: 1em; background-color: #000; border-top-left-radius: 0.9em; border-top-right-radius: 0.9em; }
|
菜单 3
![菜单 3]()
1 2 3 4 5 6 7 8 9 10 11 12 13
| #menu { color: #000; display: block; width: 50px; height: 50px; box-sizing: border-box; border-top: 10px solid; border-bottom: 10px solid; padding-top: 10px; padding-bottom: 10px; background-color: currentColor; background-clip: content-box; }
|