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代碼直接實現，但是有時候需要經過一些轉換，才能將這些新技術應用到我們常見的功能中去，這需要我們多加思考和保持思維的靈感。