利用CSS3特性巧妙實現(xiàn)漂亮的DIV箭頭

DIV箭頭用于表現(xiàn)DIV內(nèi)容的指向，是使用非常普遍的一種表現(xiàn)形式，例如新浪微博的消息轉(zhuǎn)發(fā)：

還有傲游網(wǎng)站的導(dǎo)航條：

像傲游賬戶上方這種箭頭更需要多幅圖片以表現(xiàn)箭頭和hover的效果。 

傳統(tǒng)的實現(xiàn)方式都需要一副表示箭頭的圖片放在DIV上方來實現(xiàn)，例如新浪微博的相關(guān)CSS如下：

而使用CSS3的特性，我們不需要圖片就可以實現(xiàn)更加華麗的效果，這樣做的好處還包括減少本地文件系統(tǒng)的讀取、節(jié)省服務(wù)器帶寬和連接數(shù)、避免文件下載失敗帶來的錯誤等等。

實現(xiàn)的原理是：我們可以將箭頭看作是一個矩形或者菱形的一個角，使用CSS3的屬性transform來實現(xiàn)矩形的旋轉(zhuǎn)。

朝上的箭頭需要將矩形旋轉(zhuǎn)45度，我們使用transform: rotate(45deg)來實現(xiàn)，另外針對不同的瀏覽器還需要添加不同的hack，例如Opera的-o-transform、Firefox的-moz-transform，下面以Chrome瀏覽器為例實現(xiàn)一個樣例。

定義一個arrow-shadow樣式，內(nèi)容如下:

.arrow-shadow {

-webkit-transform:rotate(45deg);

border:1px solid #AAAAAA;

height:40px;

position:absolute;

width:40px;

}

實現(xiàn)的效果如下所示：

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

.arrow-shadow {

-webkit-transform:rotate(45deg);

-webkit-box-shadow:0 0 10px 0 #aaa;

height:40px;

position:absolute;

width:40px;

}

現(xiàn)在效果如下：

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

.arrow-outer {

height:24px;

overflow:hidden;

position:absolute;

width:60px;

}

效果如下：

現(xiàn)在我們已經(jīng)有了一個漂亮的箭頭，但是這還不夠，為了表現(xiàn)得更加出色，我們再加一層內(nèi)部的箭頭。

關(guān)鍵代碼和結(jié)構(gòu)如下：

<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的發(fā)展和完善讓我們編寫代碼更加簡便和快捷，實現(xiàn)的效果也更加漂亮，例如背景的漸變不再需要背景圖片的平鋪就可以通過CSS代碼直接實現(xiàn)，但是有時候需要經(jīng)過一些轉(zhuǎn)換，才能將這些新技術(shù)應(yīng)用到我們常見的功能中去，這需要我們多加思考和保持思維的靈感。