左手's Blog
我是左手，行走在路上!
css画箭头的两种方式
前端开发的时候，悬停弹出层经常会有小箭头。分享两种常见箭头实现方式。
1. 用边框做类似
.arrow1 {
width: 0;
height: 0;
overflow: hidden;
zoom: 1;
border: 8px solid transparent;
border-top-color: #FFF;
}
将元素大小设为0，将边框色设为透明只设置其中一个边的颜色，即可实现一个三角形。
2. 用css旋转正方式，用来画有边框的三角形
.arrow2 {
width: 10px;
height: 10px;
overflow:hidden;
zoom: 1;
position: absolute;
border-right: 1px solid #AAA;
border-bottom: 1px solid #AAA;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
background-color: #FFF;
}
通过css3旋转正方形，ie下可通过滤镜实现。需要注意的是如果当前系统安装的是ie9或ie10，通过模拟ie8来调试是看不到转滤镜的。
一个实例效果:
http://www.useragentman.com/IETransformsTranslator/ 一个在线转换的网址，用来生成IE旋转滤镜参数。
附实例代码：
<!DOCTYPE html>
<html><!--[if lte IE 8]><html class="ie ltie9"><![endif]--><!--[if gte IE 9]><html class="ie ie9"><![endif]-->
<head>
<meta charset="UTF-8">
<title>css三角形</title>
<style>
.box1, .box2 {
width: 200px;
height: 200px;
padding: 20px;
float:left;
margin-right: 5px;
background-color: #a4edae;
position: relative;
}
.square1 {
background-color: #FFF;
width: 120px;
height: 60px;
display: block;
}
.arrow1 {
width: 0;
height: 0;
overflow: hidden;
zoom: 1;
border: 8px solid transparent;
_border-color:tomato;
_filter:chroma(color=tomato);
border-top-color: #FFF;
vertical-align: -7px;
*vertical-align: 0;
margin-left: 10px;
}
.square2 {
background-color: #FFF;
border: 1px solid #AAA;
width: 120px;
height: 60px;
position: absolute;
top: 20px;
left: 20px;
}
.arrow2 { width: 10px; height: 10px; overflow:hidden; zoom: 1; position: absolute; top: 76px; left: 40px; border-right: 1px solid #AAA; border-bottom: 1px solid #AAA; transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); background-color: #FFF; }
.ltie9 .arrow2 { transform: rotate(0deg); top: 75px; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand'); }
</style>
</head>
<body>
<div class="box1">
<div class="square1"></div><i class="arrow1"></i>
</div>
<div class="box2">
<div class="square2"></div><i class="arrow2"></i>
</div>
</body>
</html>