标签：
这里做一个带箭头的弹出层。
1、如果浏览器不支持CSS3，我们可以用border模拟。但是这个时候箭头不能带边框，即纯色，不太好看，这个时候我们可以利用两个b标签实现：
首先需要制作一个向上的箭头，箭头的颜色为弹出层边框颜色，其它方向可以模仿做出来。
.arrow-outer{
width:0px;height:0px;display:block;
border-bottom:10px solid #AFAFAF;
border-left:10px solid transparent;
border-right:10px solid transparent; /*制作上三角*/
}
然后制作一个比它小点的箭头，箭头的颜色就是弹出层主体的颜色，覆盖在大的箭头上面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出层测试</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style type="text/css">
*{margin:0;padding:0;font-family:微软雅黑}
.content{margin-left:400px;margin-top:400px;}
.colorbox{width:200px;height:100px;border:1px solid #AFAFAF;border-radius:3px;box-shadow:1px 5px 5px #EFEFEF;
margin-top:10px;
}
.arrow-range{border:0px solid #AFAFAF;width:20px;height:10px;left:10px;position:relative;top:-10px;}
.arrow-outer{
width:0px;height:0px;display:block;
border-bottom:10px solid #AFAFAF;
border-left:10px solid transparent;
border-right:10px solid transparent; /*制作上三角*/
}
.arrow-inner{
width:0px;height:0px;display:block;
border-bottom:9px solid #FFFFFF;
border-left:9px solid transparent;
border-right:9px solid transparent;
position:relative;left:1.4px;top:-8px;
}
</style>
</head>
<body>
<div class="content">
<button>弹出</button>
<div class="colorbox">
<div class="arrow-range">
<b class="arrow-outer"></b>
<b class="arrow-inner"></b>
</div>
</div>
</div>
</body>样式显示为：
2、如果浏览器支持CSS3，就更好办了，箭头可以理解为一个矩形的边角，这个时候可以定义一个div层，将它旋转到指定位置，这里我们旋转45度。
然后再在这个div层加个父div层，如果超过这个div层则隐藏。具体代码为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出层测试</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style type="text/css">
*{margin:0;padding:0;font-family:微软雅黑}
.content{margin-left:400px;margin-top:400px;}
.colorbox{width:200px;height:100px;border:1px solid #AFAFAF;border-radius:3px;box-shadow:1px 3px 3px #DFDFDF;
margin-top:10px;}
.arrow-outer{width:12px;height:7px;position:relative;top:-7px;left:10px;overflow:hidden}
.arrow{border:1px solid #AFAFAF;width:10px;height:10px;position:relative;top:2px;
-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);background:#FFFFFF;
-moz-transform:rotate(45deg);}
</style>
</head>
<body>
<div class="content">
<button>弹出</button>
<div class="colorbox">
<div class="arrow-outer">
<div class="arrow"></div>
</div>
</div>
</div>
</body>
</html>
具体效果为：
标签：
原文地址：http://blog.csdn.net/xuzengqiang2/article/details/43271809
