利用CSS3特性巧妙实现漂亮的DIV箭头
最后更新于：2022-04-01 19:42:11
DIV箭头用于表现DIV内容的指向，是使用非常普遍的一种表现形式，例如新浪微博的消息转发：
还有傲游网站的导航条：
像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果。
传统的实现方式都需要一副表示箭头的图片放在DIV上方来实现，例如新浪微博的相关CSS如下：
而使用CSS3的特性，我们不需要图片就可以实现更加华丽的效果，这样做的好处还包括减少本地文件系统的读取、节省服务器带宽和连接数、避免文件下载失败带来的错误等等。
实现的原理是：我们可以将箭头看作是一个矩形或者菱形的一个角，使用CSS3的属性transform来实现矩形的旋转。
朝上的箭头需要将矩形旋转45度，我们使用transform: rotate(45deg)来实现，另外针对不同的浏览器还需要添加不同的hack，例如Opera的-o-transform、Firefox的-moz-transform，下面以Chrome浏览器为例实现一个样例。
定义一个arrow-shadow样式，内容如下:
~~~
.arrow-shadow {
-webkit-transform:rotate(45deg);
border:1px solid #AAAAAA;
height:40px;
position:absolute;
width:40px;
}
~~~
实现的效果如下所示：
为了更加饱满，我们加上CSS3的盒阴影，
~~~
.arrow-shadow {
-webkit-transform:rotate(45deg);
-webkit-box-shadow:0 0 10px 0 #aaa;
height:40px;
position:absolute;
width:40px;
}
~~~
现在效果如下：
在外面加一层DIV控制它的高度和宽度。
~~~
.arrow-outer {
height:24px;
overflow:hidden;
position:absolute;
width:60px;
}
~~~
效果如下：
现在我们已经有了一个漂亮的箭头，但是这还不够，为了表现得更加出色，我们再加一层内部的箭头。
关键代码和结构如下：
~~~
.arrow-outer {
position:absolute;
height:24px;
width:60px;
overflow:hidden;
}
.arrow-shadow {
-webkit-box-shadow:0 0 10px 0 #AAAAAA;
-webkit-transform:rotate(45deg);
background:none repeat scroll 0 0 #FFFFFF;
height:40px;
left:15px;
position:absolute;
top:16px;
width:40px;
}
.arrow-inner {
position:relative;
left:10px;
top:20px;
height:40px;
width:40px;
background:#fff;
border:5px solid #ededed;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}