利用CSS3特性巧妙實現漂亮的DIV箭頭

還有傲遊**的導航條：

像傲遊賬戶上方這種箭頭更需要多幅以表現箭頭和hover的效果。

實現的原理是：我們可以將箭頭看作是乙個矩形或者菱形的乙個角，使用css3的屬性transform來實現矩形的旋轉。

朝上的箭頭需要將矩形旋轉45度，我們使用transform:rotate(45deg)來實現，另外針對不同的瀏覽器還需要新增不同的hack，例如opera的-o-transform、firefox的-moz-transform，下面以chrome瀏覽器為例實現乙個樣例。

定義乙個arrow-shadow樣式，內容如下:

.arrow-shadow

實現的效果如下所示：

為了更加飽滿，我們加上css3的盒陰影，

.arrow-shadow

現在效果如下：

在外面加一層div控制它的高度和寬度。

.arrow-outer

效果如下：

現在我們已經有了乙個漂亮的箭頭，但是這還不夠，為了表現得更加出色，我們再加一層內部的箭頭。

關鍵**和結構如下：

在外面加上一層容器，就可以看到箭頭了。

最後完整的效果圖如下所示：

css3、html5的發展和完善讓我們編寫**更加簡便和快捷，實現的效果也更加漂亮，例如背景的漸變不再需要背景的平鋪就可以通過css**直接實現，但是有時候需要經過一些轉換，才能將這些新技術應用到我們常見的功能中去，這需要我們多加思考和保持思維的靈感。

利用CSS3特性巧妙實現漂亮的DIV箭頭

還有傲遊 的導航條 像傲遊賬戶上方這種箭頭更需要多幅以表現箭頭和hover的效果。實現的原理是 我們可以將箭頭看作是乙個矩形或者菱形的乙個角，使用css3的屬性transform來實現矩形的旋轉。朝上的箭頭需要將矩形旋轉45度，我們使用transform rotate 45deg 來實現，另外針對不...

利用CSS3特性巧妙實現漂亮的DIV箭頭

還有傲遊 的導航條 像傲遊賬戶上方這種箭頭更需要多幅以表現箭頭和hover的效果。實現的原理是 我們可以將箭頭看作是乙個矩形或者菱形的乙個角，使用css3的屬性transform來實現矩形的旋轉。朝上的箭頭需要將矩形旋轉45度，我們使用transform rotate 45deg 來實現，另外針對不...

利用CSS3特性巧妙實現漂亮的DIV箭頭

還有傲遊 的導航條 像傲遊賬戶上方這種箭頭更需要多幅以表現箭頭和hover的效果。實現的原理是 我們可以將箭頭看作是乙個矩形或者菱形的乙個角，使用css3的屬性transform來實現矩形的旋轉。朝上的箭頭需要將矩形旋轉45度，我們使用transform rotate 45deg 來實現，另外針對不...