带箭头提示框

简介: 带箭头提示框

image.png

一、通过border属性:



我们先做一个宽和高都是10px的div,边框也是10px,


1 width: 10px;
2 height: 10px;
3 border: 10px solid;
4 border-color: red green yellow blue;


如下图:


图中间空白是我们设置的宽和高,如果设置为0px,会出现什么情况呢?,如下图:

 

这时候我们就可以通过设置它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色,就出来我们想要的三角形了。如下图:


现在我们来实现第一幅图上的效果:


css:
 1 .info {
 2         margin-top: 50px;
 3         position:relative;
 4         width:200px;
 5         height:50px;
 6         line-height:60px;
 7         background:#F6F1B3;
 8         box-shadow:1px 2px 3px #E9D985;
 9         border:1px solid #DACE7C;
10         border-radius:4px;
11         text-align:center;
12         color:red;
13     }
14     .nav {
15         position:absolute;
16         left:30px;
17         overflow:hidden;
18         width:0;
19         height:0;
20         border-width:10px;
21         border-style:solid dashed dashed dashed;
22     }
23     .nav-border {
24         top:-20px;
25         border-color:transparent transparent #DACE7C transparent;
26     }
27     .nav-background {
28         top:-19px;
29         border-color:transparent transparent #F6F1B3 transparent;
30     }


html:
1 <div class="info">
2     <span>提示信息</span>
3     <div class="nav nav-border"></div>
4     <div class="nav nav-background"></div>
5 </div>


二、 CSS3 transfrom



我们首先制作一个两条相邻的边框颜色相同,其他两条边边框为0px的div方框。如图:

在将方框旋转45度就可以实现三角提示效果了。


css:
 1 .info {
 2         margin-top    : 50px;
 3         position      :relative;
 4         width         :200px;
 5         height        :50px;
 6         line-height   :60px;
 7         background    :#F6F1B3;
 8         box-shadow    :1px 2px 3px #E9D985;
 9         border        :1px solid #DACE7C;
10         border-radius :4px;
11         text-align    :center;
12         color         :red;
13     }
14     .nav {
15         position          :absolute;
16         top               :-8px;
17         left              :30px;
18         overflow          :hidden;
19         width             :13px;
20         height            :13px;
21         background        :#F6F1B3;
22         border-left       :1px solid #DACE7C;
23         border-top        :1px solid #DACE7C;
24         -webkit-transform :rotate(45deg);
25         -moz-transform    :rotate(45deg);
26         -o-transform      :rotate(45deg);
27         transform         :rotate(45deg);
28     }


html:
1 <div class="info">
2     <span>提示信息</span>
3     <div class="nav"></div>
4 </div>


 

三、特殊字符'♦'  



'♦'是一个特殊字符,也就相当于一个字,所以大小是通过font-size来设置,实现第一幅图的效果:


css:
复制代码
 1 .info {
 2         margin-top: 50px;
 3         position:relative;
 4         width:200px;
 5         height:50px;
 6         line-height:60px;
 7         background:#F6F1B3;
 8         box-shadow:1px 2px 3px #E9D985;
 9         border:1px solid #DACE7C;
10         border-radius:4px;
11         text-align:center;
12         color:red;
13     }
14     .nav {
15         position:absolute;
16         left:30px;
17         overflow:hidden;
18         width:24px;
19         height:24px;
20         font:normal 24px "微软雅黑";
21     }
22     .nav-border {
23         top:-17px;
24         color:#DACE7C;
25     }
26     .nav-background {
27         top:-16px;
28         color:#F6F1B3;
29     }


html:
1 <div class="info">
2     <span>提示信息</span>
3     <div class="nav nav-border">♦</div>
4     <div class="nav nav-background">♦</div>
5 </div>


下面是一个兼容IE5.5+,chrome,Firfox等浏览器的一个demo,如果你有用到可以直接考到自己的项目中。


1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4  <title></title>
 5  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 6  <style>
 7   div.container{
 8         position         :absolute;  
 9         top              :30px;  
10         left             :40px;  
11         font-size        : 9pt;  
12         display          :block;  
13         height           :100px;  
14         width            :200px;  
15         background-color :transparent;  
16         *border          :1px solid #666;  
17     }  
18     s{  
19         position     :absolute;  
20         top          :-20px;  
21         *top         :-22px;  
22         left         :20px;  
23         display      :block;  
24         height       :0;  
25         width        :0;  
26         font-size    : 0;  
27         line-height  : 0;  
28         border-color :transparent transparent #666 transparent;  
29         border-style :dashed dashed solid dashed;  
30         border-width :10px;  
31     }  
32     i{
33         position     :absolute;  
34         top          :-9px;  
35         *top         :-9px;  
36         left         :-10px;  
37         display      :block;  
38         height       :0;  
39         width        :0;  
40         font-size    : 0;  
41         line-height  : 0;  
42         border-color :transparent transparent #fff transparent;  
43         border-style :dashed dashed solid dashed;  
44         border-width :10px;  
45     }  
46     .content{  
47         border                :1px solid #666;  
48         -moz-border-radius    :3px;  
49         -webkit-border-radius :3px;  
50         position              :absolute;  
51         background-color      :#fff;  
52         width                 :100%;  
53         height                :100%;  
54         padding               :5px;  
55         *top                  :-2px;  
56         *border-top           :1px solid #666;  
57         *border-top           :1px solid #666;  
58         *border-left          :none;  
59         *border-right         :none;  
60         *height               :102px;  
61         box-shadow            : 3px 3px 4px #999;  
62         -moz-box-shadow       : 3px 3px 4px #999;  
63         -webkit-box-shadow    : 3px 3px 4px #999;  
64         /* For IE 5.5 - 7 */
65         filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');  
66         /* For IE 8 */  
67         -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";  
68     }
69  </style>
70 </head>
71 <body>
72 <div class="container">
73         <div class="content">
74             hello world!
75         </div>
76         <s>
77             <i></i>
78         </s>
79  </div>
80 </body>
81 </html>


效果图:


image.png

小结:  


 

带箭头的提示框给用户的交互带来很好的效果,本文介绍了三个方法,如果你还有其他方法可以@me,我会非常感激。希望本文能够对你有些帮助。


相关文章
|
Windows
怎么让鼠标带黄色光圈?
怎么让鼠标带黄色光圈?
1176 0
怎么让鼠标带黄色光圈?
|
前端开发
Window对象提示框、确认框、输入框、弹窗详解
本文目录 1. 背景 2. alert提示框 3. confirm确认框 4. prompt输入框 5. showModalDialog弹窗 6. 小结
1067 0
Window对象提示框、确认框、输入框、弹窗详解
|
11天前
|
JavaScript
vue中轻松搞掂鼠标气泡框提示框tip跟随
vue中轻松搞掂鼠标气泡框提示框tip跟随
|
5月前
|
小程序 JavaScript
小程序鼠标点击按钮(改变背景颜色字体)
小程序鼠标点击按钮(改变背景颜色字体)
68 0
|
4月前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
|
5月前
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
红色小圆点消息提示之BadgeView
红色小圆点消息提示之BadgeView
84 0
红色小圆点消息提示之BadgeView
|
前端开发 JavaScript
修改Tooltip 文字提示 的背景色 箭头颜色
修改Tooltip 文字提示 的背景色 箭头颜色
|
Web App开发 安全 网络安全
|
前端开发
CSS气泡提示框 可自定义配置箭头
在线演示 本地下载
1353 0