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; } ~~~ 效果如下：  现在我们已经有了一个漂亮的箭头，但是这还不够，为了表现得更加出色，我们再加一层内部的箭头。  关键代码和结构如下： ~~~ <style type="text/css"> .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); } </style> <div class="arrow-outer"> <div class="arrow-shadow"> </div> </div> <div class="arrow-inner"> </div> ~~~ 在外面加上一层容器，就可以看到箭头了。  最后完整的效果图如下所示：  CSS3、HTML5的发展和完善让我们编写代码更加简便和快捷，实现的效果也更加漂亮，例如背景的渐变不再需要背景图片的平铺就可以通过CSS代码直接实现，但是有时候需要经过一些转换，才能将这些新技术应用到我们常见的功能中去，这需要我们多加思考和保持思维的灵感。