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

2024-10-19 06:23:34

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框，这种箭头可以通过背景图片或者是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，我会非常感激。希望本文能够对你有些帮助。

jQuery带箭头提示框tooltips插件集锦

摘要: 之前给大家介绍过用CSS来实现带箭头的提示框,今天我们来点不太一样的,本文将分享几款带箭头提示框. qtip qTip是一种先进的提示插件,基于jQuery框架.以用户友好,而且功能丰富,qTip为您提供不一般的功能,如圆角和语音气泡提示,并且最重要的是免费.支持ie6+以及其他主流浏览器 grumble.js grumble.js提供了特殊的提示,北/东/南/西定位的一般限制.可以围绕一个给定的元素以任意角度旋转,任何距离可以被指定,任何CSS样式可以应用.自动尺寸调整为本地化的文本使
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)

本文实例讲述了jQuery实现漂亮实用的商品图片tips提示框效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script type="text/javascript&
三种带箭头提示框总结实例

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框. 1.通过border属性思路:两个三角形,通过定位使两个三角形相差1px作为边框. 2.CSS3 transfrom 思路:先做一个两条边相同颜色的正方形,然后旋转一定角度就是三角形了 3.特殊字符'♦' 思路:特殊字符漏出上半部分,看上去就像三角形了一.通过border属性: 我们先做一个宽和高都是10px的div,边框也是10px, width
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

三种提示框 alert () confirm() prompt () alert () alert()方法是显示一条弹出提示消息和确认按钮的警告框. 需要注意的是 :alert()是一个阻塞的函数,如果我们不点确认按钮,后面的内容就不会加载出来. 使用方式: alert("想要提示的文本内容") 样例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <
使用JS组件实现带ToolTip验证框的实例代码

本组件依赖JQuery 本人测试的JQuery 是1.8, 兼容IE8,IE9,谷歌,火狐等. //验证输入框 function ValidateCompent(input){ var _input = $(input).clone(true); _input.css("height",$(input).css("height")); _input.css("width", $(input).css("width")); va
iOS中 LGLAlertView 提示框的实例代码

使用与iOS8 以后,只是把系统的UIAlertController进行了封装,省的每次用的时候要写很多的代码.封装后只需要一句代码即可 , deome 地址 :https://github.com/liguoliangiOS/LGLAlertView.git 上代码LGLAlertView.h: #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, LGLAlert
Asp.Net中避免重复提交和弹出提示框的实例代码

前台代码: <asp:Button ID="Button1" runat="server" Text="打印" onclick="Button1_Click" OnClientClick="this.value='数据提交中--';this.disabled=true;" UseSubmitBehavior="False" /> 后台代码: public partial cl
IOS 仿Android吐司提示框的实例(分享)

直接上代码 #import <UIKit/UIKit.h> @interface ShowToastView : UIView +(void)showToastView:(UIView *)uiview WithMessage:(NSString *)message; +(void)showToastViewShort:(UIView *)uiview WithMessage:(NSString *)message; +(void)showToastViewWithCostUpload:(UI
vue的全局提示框组件实例代码

这篇文章给大家介绍一个vue全局提示框组件,具体代码如下所示: <template>  <div v-show="visible" class="dialog-tips dialog-center"> <div>{{message}}</div> </div> </template> <script> export default { data
php+ajax做仿百度搜索下拉自动提示框(有实例)

php+mysql+ajax实现百度搜索下拉提示框主要有3个文件三个文件在同一个目录里如下图下面是三个文件的代码把sql文件导入到mysql数据库里修改下数据库密码为自己的记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框效果图 rpc.php文件复制代码代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $
jquery悬浮提示框完整实例

本文实例讲述了jquery悬浮提示框实现方法.分享给大家供大家参考,具体如下: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { x = 5; y = 15; $("p").hover

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

相关推荐

随机推荐