带箭头方框

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框。

  1. 通过border属性
    思路:两个三角形,通过定位使两个三角形相差1px作为边框。
  2. CSS3 transfrom
    思路:先做一个两条边相同颜色的正方形,然后旋转一定角度就是三角形了
  3. 特殊字符‘♦‘
    思路:特殊字符漏出上半部分,看上去就像三角形了

一、通过border属性:

我们先做一个宽和高都是10px的div,边框也是10px,

1 width: 10px;
2 height: 10px;
3 border: 10px solid;
4 border-color: red green yellow blue; 

如下图:

图中间空白是我们设置的宽和高,如果设置为0px,会出现什么情况呢?,如下图:

这时候我们就可以通过设置它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色,就出来我们想要的三角形了。如下图:

现在我们来实现第一幅图上的效果:

css:

 1 .info {
 2         margin-top: 50px;
 3         position:relative;
 4         width:200px;
 5         height:50px;
 6         line-height:60px;
 7         background:#F6F1B3;
 8         box-shadow:1px 2px 3px #E9D985;
 9         border:1px solid #DACE7C;
10         border-radius:4px;
11         text-align:center;
12         color:red;
13     }
14     .nav {
15         position:absolute;
16         left:30px;
17         overflow:hidden;
18         width:0;
19         height:0;
20         border-width:10px;
21         border-style:solid dashed dashed dashed;
22     }
23     .nav-border {
24         top:-20px;
25         border-color:transparent transparent #DACE7C transparent;
26     }
27     .nav-background {
28         top:-19px;
29         border-color:transparent transparent #F6F1B3 transparent;
30     }

html:

1 <div class="info">
2     <span>提示信息</span>
3     <div class="nav nav-border"></div>
4     <div class="nav nav-background"></div>
5 </div>

二、 CSS3 transfrom

我们首先制作一个两条相邻的边框颜色相同,其他两条边边框为0px的div方框。如图:

在将方框旋转45度就可以实现三角提示效果了。

css:

 1 .info {
 2         margin-top    : 50px;
 3         position      :relative;
 4         width         :200px;
 5         height        :50px;
 6         line-height   :60px;
 7         background    :#F6F1B3;
 8         box-shadow    :1px 2px 3px #E9D985;
 9         border        :1px solid #DACE7C;
10         border-radius :4px;
11         text-align    :center;
12         color         :red;
13     }
14     .nav {
15         position          :absolute;
16         top               :-8px;
17         left              :30px;
18         overflow          :hidden;
19         width             :13px;
20         height            :13px;
21         background        :#F6F1B3;
22         border-left       :1px solid #DACE7C;
23         border-top        :1px solid #DACE7C;
24         -webkit-transform :rotate(45deg);
25         -moz-transform    :rotate(45deg);
26         -o-transform      :rotate(45deg);
27         transform         :rotate(45deg);
28     }

html:

1 <div class="info">
2     <span>提示信息</span>
3     <div class="nav"></div>
4 </div>

三、特殊字符‘♦‘

‘♦‘是一个特殊字符,也就相当于一个字,所以大小是通过font-size来设置,实现第一幅图的效果:

css:

 1 .info {
 2         margin-top: 50px;
 3         position:relative;
 4         width:200px;
 5         height:50px;
 6         line-height:60px;
 7         background:#F6F1B3;
 8         box-shadow:1px 2px 3px #E9D985;
 9         border:1px solid #DACE7C;
10         border-radius:4px;
11         text-align:center;
12         color:red;
13     }
14     .nav {
15         position:absolute;
16         left:30px;
17         overflow:hidden;
18         width:24px;
19         height:24px;
20         font:normal 24px "微软雅黑";
21     }
22     .nav-border {
23         top:-17px;
24         color:#DACE7C;
25     }
26     .nav-background {
27         top:-16px;
28         color:#F6F1B3;
29     }

html:

1 <div class="info">
2     <span>提示信息</span>
3     <div class="nav nav-border">♦</div>
4     <div class="nav nav-background">♦</div>
5 </div>

下面是一个兼容IE5.5+,chrome,Firfox等浏览器的一个demo,如果你有用到可以直接考到自己的项目中。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4  <title></title>
 5  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 6  <style>
 7   div.container{
 8         position         :absolute;
 9         top              :30px;
10         left             :40px;
11         font-size        : 9pt;
12         display          :block;
13         height           :100px;
14         width            :200px;
15         background-color :transparent;
16         *border          :1px solid #666;
17     }
18     s{
19         position     :absolute;
20         top          :-20px;
21         *top         :-22px;
22         left         :20px;
23         display      :block;
24         height       :0;
25         width        :0;
26         font-size    : 0;
27         line-height  : 0;
28         border-color :transparent transparent #666 transparent;
29         border-style :dashed dashed solid dashed;
30         border-width :10px;
31     }
32     i{
33         position     :absolute;
34         top          :-9px;
35         *top         :-9px;
36         left         :-10px;
37         display      :block;
38         height       :0;
39         width        :0;
40         font-size    : 0;
41         line-height  : 0;
42         border-color :transparent transparent #fff transparent;
43         border-style :dashed dashed solid dashed;
44         border-width :10px;
45     }
46     .content{
47         border                :1px solid #666;
48         -moz-border-radius    :3px;
49         -webkit-border-radius :3px;
50         position              :absolute;
51         background-color      :#fff;
52         width                 :100%;
53         height                :100%;
54         padding               :5px;
55         *top                  :-2px;
56         *border-top           :1px solid #666;
57         *border-top           :1px solid #666;
58         *border-left          :none;
59         *border-right         :none;
60         *height               :102px;
61         box-shadow            : 3px 3px 4px #999;
62         -moz-box-shadow       : 3px 3px 4px #999;
63         -webkit-box-shadow    : 3px 3px 4px #999;
64         /* For IE 5.5 - 7 */
65         filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘#999999‘);
66         /* For IE 8 */
67         -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘#999999‘)";
68     }
69  </style>
70 </head>
71 <body>
72 <div class="container">
73         <div class="content">
74             hello world!
75         </div>
76         <s>
77             <i></i>
78         </s>
79  </div>
80 </body>
81 </html>

效果图:

小结:

  带箭头的提示框给用户的交互带来很好的效果,本文介绍了三个方法,如果你还有其他方法可以@me,我会非常感激。希望本文能够对你有些帮助。

时间: 2024-10-05 15:25:50

带箭头方框的相关文章

CSS带箭头的DIV方框,自适应高度

<html><head><title>CSS实现带箭头的DIV方框</title><style>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

带箭头提示框总结及实例

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

使用Less制作带箭头提示框

这里使用Less来制作带箭头的提示框,跟css比起来,方便多了,可以剩下很多的代码,别的不扯了,先看看效果吧. 这里我实现了4个方向的提示框,下面是具体实现代码: 提示框代码: <div class="top_prompt"> <div class="top_triangle"> <span class="line"></span> <span class="back"&g

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); var $banner_ul = $('.banner-img'); var $btn = $('.banner-btn'); var $btn_a = $btn.find('a') var v_width = $banner.width(); var page = 1; var timer = null;

Android自定义ViewGroup(一)——带箭头的圆角矩形菜单

今天要做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽度.箭头

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层:很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

div+css制作带箭头提示框效果图(原创文章)

一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^ 先来个简单点的吧,上效果图 刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的时候发现,哇!原来这么简单,我这脑袋瓜咋没反应过来呢,所以整理了下顺便简化了分享出来,希望对大家有帮助. <div class="demo"></div> <style>.demo{    width:0;    height:0px;    borde

popover带箭头弹框

我们先来看一下效果吧: 分析:这个带箭头的弹框其实是一个控制器,通过Modal方式展现,但跟传统模态方式效果不一样,我们一眼就能看出. Xib方式实现popover: 1.segue的时候选择Present As Popover 2.我们看下segue的属性: 3.重写prepareforsegue方法: 1 override func prepare(for segue: UIStoryboardSegue, sender: Any?) { 2 // 1.判断跳转控制器的类型 3 if seg

圆角带箭头的提示框css实现

css是一个很强大的东西,很多网页效果,我们可以通过css直接实现.今天给大家分享的是一个用css实现的圆角带箭头的提示框. 效果如下图: 这一个样式主要涉及到了css的边框样式border的运用和定位样式position. 实现代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆角带箭头的框</title&