三种带箭头提示框总结实例

时间：2021-05-25

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

1.通过border属性

思路：两个三角形，通过定位使两个三角形相差1px作为边框。

2.CSS3 transfrom

思路：先做一个两条边相同颜色的正方形，然后旋转一定角度就是三角形了

3.特殊字符'♦'

思路：特殊字符漏出上半部分，看上去就像三角形了

一、通过border属性：

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

width: 10px; height: 10px; border: 10px solid;border-color: red green yellow blue;

如下图：

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

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

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

css：

.info { margin-top: 50px; position:relative; width:200px; height:50px; line-height:60px; background:#F6F1B3; box-shadow:1px 2px 3px #E9D985; border:1px solid #DACE7C; border-radius:4px; text-align:center; color:red; } .nav { position:absolute; left:30px; overflow:hidden; width:0; height:0; border-width:10px; border-style:solid dashed dashed dashed; } .nav-border { top:-20px; border-color:transparent transparent #DACE7C transparent; } .nav-background { top:-19px; border-color:transparent transparent #F6F1B3 transparent; }

html：

<div class="info"> <span>提示信息</span> <div class="nav nav-border"></div> <div class="nav nav-background"></div> </div>

二、CSS3 transfrom

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

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

css：

.info { margin-top : 50px; position :relative; width :200px; height :50px; line-height :60px; background :#F6F1B3; box-shadow :1px 2px 3px #E9D985; border :1px solid #DACE7C; border-radius :4px; text-align :center; color :red; } .nav { position :absolute; top :-8px; left :30px; overflow :hidden; width :13px; height :13px; background :#F6F1B3; border-left :1px solid #DACE7C; border-top :1px solid #DACE7C; -webkit-transform :rotate(45deg); -moz-transform :rotate(45deg); -o-transform :rotate(45deg); transform :rotate(45deg); }

html：

<div class="info"> <span>提示信息</span> <div class="nav"></div> </div>

三、特殊字符'♦'

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

css：

.info { margin-top: 50px; position:relative; width:200px; height:50px; line-height:60px; background:#F6F1B3; box-shadow:1px 2px 3px #E9D985; border:1px solid #DACE7C; border-radius:4px; text-align:center; color:red; } .nav { position:absolute; left:30px; overflow:hidden; width:24px; height:24px; font:normal 24px "微软雅黑"; } .nav-border { top:-17px; color:#DACE7C; } .nav-background { top:-16px; color:#F6F1B3; }

html：

<div class="info"> <span>提示信息</span> <div class="nav nav-border">♦</div> <div class="nav nav-background">♦</div> </div>

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

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><style> div.container{ position :absolute; top :30px; left :40px; font-size : 9pt; display :block; height :100px; width :200px; background-color :transparent; *border :1px solid #666; } s{ position :absolute; top :-20px; *top :-22px; left :20px; display :block; height :0; width :0; font-size : 0; line-height : 0; border-color :transparent transparent #666 transparent; border-style :dashed dashed solid dashed; border-width :10px; } i{ position :absolute; top :-9px; *top :-9px; left :-10px; display :block; height :0; width :0; font-size : 0; line-height : 0; border-color :transparent transparent #fff transparent; border-style :dashed dashed solid dashed; border-width :10px; } .content{ border :1px solid #666; -moz-border-radius :3px; -webkit-border-radius :3px; position :absolute; background-color :#fff; width :100%; height :100%; padding :5px; *top :-2px; *border-top :1px solid #666; *border-top :1px solid #666; *border-left :none; *border-right :none; *height :102px; box-shadow : 3px 3px 4px #999; -moz-box-shadow : 3px 3px 4px #999; -webkit-box-shadow : 3px 3px 4px #999; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; } </style> </head> <body> <div class="container"> <div class="content"> hello world! </div> <s> <i></i> </s> </div> </body> </html>

效果图：

小结：

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章