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

2021-09-06 01:27:00 字數 720 閱讀 9923

還有傲遊**的導航條:

像傲遊賬戶上方這種箭頭更需要多幅以表現箭頭和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 來實現,另外針對不...