html带箭头的提⽰框，带箭头提⽰框总结实例
⽆论是提⽰框还是导航栏都能看到如上图所⽰的带有箭头的框框，这种箭头可以通过背景图⽚或者是css来实现，本⽂介绍三种通过css实现带箭头的提⽰框。
通过border属性
思路：两个三⾓形，通过定位使两个三⾓形相差1px作为边框。
CSS3 transfrom
思路：先做⼀个两条边相同颜⾊的正⽅形，然后旋转⼀定⾓度就是三⾓形了
特殊字符'♦'
思路：特殊字符漏出上半部分，看上去就像三⾓形了
⼀、通过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 提⽰信息span>
3 div>
4 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
2 提⽰信息span>
3 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;
absolute relative11 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 提⽰信息span>
3 ♦div>
4 ♦div>
5 div>
下⾯是⼀个兼容IE5.5+,chrome,Firfox等浏览器的⼀个demo，如果你有⽤到可以直接考到⾃⼰的项⽬中。
1 DOCTYPE html>
2
3
4
title>
5
6
ainer{
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;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论