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


Posted in Javascript onJune 14, 2016

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

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是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 兼容鼠标滚轮事件
Apr 07 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 #Javascript
简单实现的JQuery文本框水印插件
Jun 14 #Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 #Javascript
浅析jQuery 3.0中的Data
Jun 14 #Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 #Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 #Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 #Javascript
You might like
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP文件操作方法汇总
2015/07/01 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
Python 学习笔记
2008/12/27 Python
Python中的集合类型知识讲解
2015/08/19 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
keras K.function获取某层的输出操作
2020/06/29 Python
remote接口和home接口主要作用
2013/05/15 面试题
计算机专业大学生的自我评价
2013/11/14 职场文书
项目建议书怎么写
2014/05/15 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
毕业证代领委托书
2014/09/26 职场文书
党员进社区活动总结
2015/05/07 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
go 实现简易端口扫描的示例
2021/05/22 Golang
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers