带箭头提示框总结及实例_html/css_WEB-ITnose

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框，这种箭头可以通过背景图片或者是css来实现，本文介绍三种通过css实现带箭头的提示框。

1. 通过border属性
   思路：两个三角形，通过定位使两个三角形相差1px作为边框。
2. CSS3 transfrom
   思路：先做一个两条边相同颜色的正方形，然后旋转一定角度就是三角形了
3. 特殊字符'♦'
   思路：特殊字符漏出上半部分，看上去就像三角形了

一、通过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 
2     提示信息3     4     5 

二、 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 
2     提示信息3     4 

三、特殊字符'♦'

'♦'是一个特殊字符，也就相当于一个字，所以大小是通过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 
2     提示信息3     
♦
4     
♦
5 

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

 1  2  3    4   5 6  70 71 72 
73         
74             hello world!75         
76         77             78         79  
80 81 

效果图：

小结：

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