html自定义提示框

自定义html提示框比较令人困惑的就是编写三角形的样式;以前的实现方式是在标签内使用span标签来实现。不过现在有了css提供的两个为类:before,:after之后,可以不用再内置span标签了;

下面是本人的一个简单例子:

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>提示框的三角形原理</title>
        <style type="text/css">
            #tips {
                display: inline-block;
                position: relative;
                padding: 0px 15px;
                border-radius: 5px;
                border: 1px solid #DDD;
            }
            #tips:after,
            #tips:before {
                content: "";
                position: absolute;
                left: 10px;
                bottom: -16px;
                border: 8px solid transparent;
                border-top: 8px solid #DDD;
            }
            #tips:after {
                border-top: 8px solid #FFF;
                bottom: -15px;
            }
        </style>
    </head>
    <body>
        <div id="tips">
            <p>我是没有人</p>
        </div>
    </body>
</html>

 qw

posted @   居无常  阅读(5374)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示