Tom Blog

css 提示框

发表于 |
css 制作提示框 after和before制作提示框效果 提示框

效果图
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>after和before制作提示框（2013.08.08）</title>
</head>
<style>
    html,
    body,
    div {
        padding: 0px;
        margin: 0px;
    }
    .ts,
    .ts_right,
    .ts_bottom,
    .ts_left {
        border: 4px solid #CCC;
        position: relative;
        /*相对位置，目地是｛使after和bofore绝对位置原点位置处于ts盒子｝*/
        margin: 50px;
        background: #09f;
        line-height: 50px;
        padding: 0px 20px 0px 20px;
        font-size: 20px;
        font-weight: 900;
        display: inline-block;
        color: #FFF;
        font-family: "幼圆";
    }
    .ts:after,
    .ts:before,
    .ts_right:after,
    .ts_right:before,
    .ts_bottom:after,
    .ts_bottom:before,
    .ts_left:after,
    .ts_left:before {
        position: absolute;
        /*相对于ts盒子定位*/
        border: 10px solid transparent;
        content: " ";
    }
    /*上*/
    .ts:after,
    .ts:before {
        left: 50%;
        bottom: 100%;
    }
    .ts:after {
        border-bottom-color: #09f;
        border-width: 10px;
        margin-left: -10px;
    }
    .ts:before {
        border-bottom-color: #ccc;
        border-width: 16px;
        margin-left: -16px;
    }
    /*右*/
    .ts_right:after,
    .ts_right:before {
        left: 100%;
        top: 50%;
    }
    .ts_right:after {
        border-left-color: #09f;
        border-width: 10px;
        margin-top: -10px;
    }
    .ts_right:before {
        border-left-color: #ccc;
        border-width: 16px;
        margin-top: -16px;
    }
    /*下*/
    .ts_bottom:after,
    .ts_bottom:before {
        left: 50%;
        top: 100%;
    }
    .ts_bottom:after {
        border-top-color: #09f;
        border-width: 10px;
        margin-left: -10px;
    }
    .ts_bottom:before {
        border-top-color: #ccc;
        border-width: 16px;
        margin-left: -16px;
    }
    /*左*/
    .ts_left:after,
    .ts_left:before {
        right: 100%;
        top: 50%;
    }
    .ts_left:after {
        border-right-color: #09f;
        border-width: 10px;
        margin-top: -10px;
    }
    .ts_left:before {
        border-right-color: #ccc;
        border-width: 16px;
        margin-top: -16px;
    }
</style>
<body>
    <div class="ts">提示框</div>
    <div class="ts_right">提示框(右)还是自适应的！
        <p>来了</p>
    </div>
    <div class="ts_bottom">提示框（下）</div>
    <div class="ts_left">提示框（左）</div>
</body>
</html>