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


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 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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/21 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php define的第二个参数使用方法
2013/11/04 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
Vue shopCart 组件开发详解
2018/01/26 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python解决网站的反爬虫策略总结
2016/10/26 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
贸易经济专业自荐书
2014/06/29 职场文书
营销学习心得体会
2014/09/12 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
如何撰写创业策划书
2019/06/27 职场文书
golang内置函数len的小技巧
2021/07/25 Golang