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

更新时间：2016年06月14日 09:59:29 作者：2778085001

这篇文章主要介绍了三种带箭头提示框总结实例的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框，这种箭头可以通过背景图片或者是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; 
   /* For IE 5.5 - 7 */
   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); 
  /* For IE 8 */ 
  -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，我会非常感激。希望本文能够对你有些帮助。

您可能感兴趣的文章:

什么是JavaScript的防抖与节流
这篇文章主要介绍了什么是JavaScript的防抖与节流,防抖是在频繁触发某一个事件时，一段时间内不再触发该事件后才会去调用对应的回调函数，在设定间隔时间内如果下一次事件被触发，那么就重新开始定时器，直到事件触发结束，节流看下面文章的具体介绍吧
2021-12-12
js清空表单数据的两种方式(遍历+reset)
这篇文章主要介绍了js清空表单数据的两种方式(遍历+reset),需要的朋友可以参考下
2014-07-07
JS获取子、父、兄节点方法小结
这篇文章主要介绍了JS获取子、父、兄节点方法总结及JS获取兄弟节点的两种方法,需要的朋友可以参考下
2017-08-08
js 事件的传播机制(实例讲解)
下面小编就为大家带来一篇js 事件的传播机制(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
JavaScript递归函数解“汉诺塔”算法代码解析
这篇文章主要介绍了JavaScript递归函数解“汉诺塔”算法代码解析,需要的朋友可以参考下
2018-07-07
Webpack按需加载打包chunk命名的方法
这篇文章主要给大家介绍了关于Webpack按需加载打包chunk命名的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Webpack具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
JavaScript使用cookie记录临时访客信息的方法
这篇文章主要介绍了JavaScript使用cookie记录临时访客信息的方法,涉及javascript操作cookie的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
搞定js的加密和压缩，一方面可以提高页面加载性能，另外一方面也希望辛苦研发出来的成果得到一定的保护,感兴趣的朋友可以了解下，或许对你有所帮助
2013-01-01
又一款js时钟!transform实现时钟效果
又一款js时钟!这篇文章主要为大家详细介绍了transform实现的时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
微信小程序将字符串生成二维码图片的操作方法
这篇文章主要介绍了微信小程序将字符串生成二维码图片的操作方法,需要的朋友可以参考下
2018-07-07

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具