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

DIV箭頭用於表現DIV內容的指向,是使用很是廣泛的一種表現形式,例如新浪微博的消息轉發:css

還有傲遊網站的導航條:web

 

 

 

像傲遊帳戶上方這種箭頭更須要多幅圖片以表現箭頭和hover的效果。 瀏覽器

傳統的實現方式都須要一副表示箭頭的圖片放在DIV上方來實現,例如新浪微博的相關CSS以下:服務器

 

 

 

而使用CSS3的特性,咱們不須要圖片就能夠實現更加華麗的效果,這樣作的好處還包括減小本地文件系統的讀取、節省服務器帶寬和鏈接數、避免文件下載失敗帶來的錯誤等等。網站

實現的原理是:咱們能夠將箭頭看做是一個矩形或者菱形的一個角,使用CSS3的屬性transform來實現矩形的旋轉。orm

朝上的箭頭須要將矩形旋轉45度,咱們使用transform: rotate(45deg)來實現,另外針對不一樣的瀏覽器還須要添加不一樣的hack,例如Opera的-o-transform、Firefox的-moz-transform,下面以Chrome瀏覽器爲例實現一個樣例。圖片

定義一個arrow-shadow樣式,內容以下:it

.arrow-shadow {io

-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>

在外面加上一層容器,就能夠看到箭頭了。

 

 

最後完整的效果圖以下所示:

 

 

CSS三、HTML5的發展和完善讓咱們編寫代碼更加簡便和快捷,實現的效果也更加漂亮,例如背景的漸變再也不須要背景圖片的平鋪就能夠經過CSS代碼直接實現,可是有時候須要通過一些轉換,才能將這些新技術應用到咱們常見的功能中去,這須要咱們多加思考和保持思惟的靈感。

相關文章
相關標籤/搜索