气泡提示能给用户良好的浏览体验，相信大部分前端人都做过吧？(什么？你没做过，那信息提示层总做过吧？！)
最近在网上看到了一种写气泡提示的纯CSS代码，其代码简练，兼容性之强，是非常少见的，效果如下图。
首先，是第一种，利用字符“◆”实现。
请看代码，HTML部分：
|
1
2
3
4
|
<
div
class
=
"poptip"
>
<
span
class
=
"poptip-arrow poptip-arrow-bottom"
><
em
>◆</
em
><
i
>◆</
i
></
span
>
这是气泡提示，纯CSS[◆字符]写的哦
</
div
>
|
CSS部分(上面的CSS代码看上去很多，但其实已经很简练了)：
|
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
.poptip {
position
:
absolute
;
top
:
20px
;
left
:
20px
;
padding
:
6px
10px
5px
;
*
padding
:
7px
10px
4px
;
line-height
:
16px
;
color
:
#DB7C22
;
font-size
:
12px
;
background-color
:
#FFFCEF
;
border
:
solid
1px
#FFBB76
;
border-radius:
2px
;
box-shadow:
0
0
3px
#ddd
;
}
.poptip-arrow {
position
:
absolute
;
overflow
:
hidden
;
font-style
:
normal
;
font-family
: simsun;
font-size
:
12px
;
text-shadow
:
0
0
2px
#ccc
;
}
.poptip-arrow em,.poptip-arrow i {
position
:
absolute
;
left
:
0
;
top
:
0
;
font-style
:
normal
;
}
.poptip-arrow em {
color
:
#FFBB76
;
}
.poptip-arrow i {
color
:
#FFFCEF
;
text-shadow
:
none
;
}
.poptip-arrow-
top
,.poptip-arrow-
bottom
{
height
:
6px
;
width
:
12px
;
left
:
12px
;
margin-left
:
-6px
;
}
.poptip-arrow-
left
,.poptip-arrow-
right
{
height
:
12px
;
width
:
6px
;
top
:
12px
;
margin-top
:
-6px
;
}
.poptip-arrow-
top
{
top
:
-6px
;
}
.poptip-arrow-
top
em {
top
:
-1px
;
}
.poptip-arrow-
top
i{
top
:
0px
;
}
.poptip-arrow-
bottom
{
bottom
:
-6px
;
}
.poptip-arrow-
bottom
em {
top
:
-8px
;
}
.poptip-arrow-
bottom
i {
top
:
-9px
;
}
.poptip-arrow-
left
{
left
:
-6px
;
}
.poptip-arrow-
left
em {
left
:
1px
;
}
.poptip-arrow-
left
i {
left
:
2px
;
}
.poptip-arrow-
right
{
right
:
-6px
;
}
.poptip-arrow-
right
em {
left
:
-6px
;
}
.poptip-arrow-
right
i {
left
:
-7px
;
}
|
第二种，边框实现，一样，直接上代码：
HTML部分：
|
1
2
3
4
5
|
<
div
class
=
"message-box"
>
<
span
>这是气泡提示，纯CSS[border]写的哦</
span
>
<
div
class
=
"triangle-border tb-background"
></
div
>
<
div
class
=
"triangle-border tb-border"
></
div
>
</
div
>
|
CSS部分(依旧是很简练的代码)：
|
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
|
.
message-box
{
position
:
relative
;
width
:
240px
;
height
:
60px
;
line-height
:
60px
;
background
:
#E9FBE4
;
box-shadow:
1px
2px
3px
#E9FBE4
;
border
:
1px
solid
#C9E9C0
;
border-radius:
4px
;
text-align
:
center
;
color
:
#0C7823
;
font-size
:
12px
;
}
.triangle-border {
position
:
absolute
;
left
:
30px
;
overflow
:
hidden
;
width
:
0
;
height
:
0
;
border-width
:
10px
;
border-style
:
solid
dashed
dashed
dashed
;
}
.tb-background {
bottom
:
-20px
;
border-color
:
#C9E9C0
transparent
transparent
transparent
;
}
.tb-border {
bottom
:
-19px
;
border-color
:
#E9FBE4
transparent
transparent
transparent
;
}
|