(转载)css画三角形等各类图标

css3 的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标。

这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形。

  1. 我们要将该 divwidthheight 都设置为 0,三角形是通过设置 border 来实现;
  2. 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上、右、下、左、上左、上右、下右、下左,不规则的朝向可以通过旋转来实现);
  3. 如果是上、右、下、左四种中的一种,将朝向的对面的 border-color 设置为我们需要的颜色,该朝向的这一边不设置 border,其它两边的 border-color 设置为 transparent
  4. 如果是上左、上右、下右、下左中的一种,以上右为例,设置相关的两边:上和右的 border-color 设置成我们想要的颜色,其它两边的 border-width 设置成 transparent
  5. 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: ''; /*针对before,after必须加上*/
position: absolute;
left: 50%;
top: 0.7em;
margin-left: -0.45em; /*宽度的一半,结合 left: 50%; 使用*/
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; /*在绝对定位中,top: 0; bottom: 0; margin: auto; 结合使用能竖直居中*/
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; /*背景将绘制在内容方框内*/
}
---- 本文结束,感谢您的阅读 ----