视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
带箭头提示框总结实例
2020-11-27 16:41:07 责编:小采
文档

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是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 
2 提示信息 3 4 5

二、 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 
2 提示信息 3 4

三、特殊字符'♦'

'♦'是一个特殊字符,也就相当于一个字,所以大小是通过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 
2 提示信息 3 4 5

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

 1 
 2 
 3 
 4 
 5 
 6 
70 
71 
72 
73
74 hello world! 75
76 77 78 79
80
81

效果图:

小结:

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

下载本文
显示全文
专题