首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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，我会非常感激。希望本文能够对你有些帮助。

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

- Author -

2778085001

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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
底部导航(1) CompletableFuture(1) 对齐打印(1) 异步回调(1) Springboot-cli(1) format(1) FutureTask(3) ForkJoin(1) JAVA(88) 主题(1)
You might like
手冲咖啡应该是现代精品咖啡店的必备选项吗？
2021/03/03 冲泡冲煮
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
php的文件上传入门教程（实例讲解）
2014/04/10 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
如何利用Fabric自动化你的任务
2016/10/20 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
临床医师专业个人自我评价范文
2013/11/07 职场文书
中央空调节能方案
2014/06/15 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
小学教师师德整改措施
2014/09/29 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
个人收入证明范本
2015/06/12 职场文书
某药房的新员工入职告知书！
2019/07/15 职场文书
win10清理dns缓存
2022/04/19 数码科技