HardBirch

利用CSS3特性巧妙实现漂亮的DIV箭头

时间:10-09-18 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:5 点击: 2,866 次

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代码直接实现,但是有时候需要经过一些转换,才能将这些新技术应用到我们常见的功能中去,这需要我们多加思考和保持思维的灵感。

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: 利用CSS3特性巧妙实现漂亮的DIV箭头

利用CSS3特性巧妙实现漂亮的DIV箭头:目前有5 条留言

  1. 5楼
    wangwei155:

    蛮cool[e01]

    2011-02-23 20:35 [回复]
  2. 目前IE浏览器支持吗?

    2011-02-24 08:29 [回复]
  3. 地板
    Daisy_Leaf:

    我写的
    为啥出来的还是正方形不是你那样的呢??

    2011-02-24 10:28 [回复]
  4. 板凳
    Daisy_Leaf:

    谷歌是 火狐还是不行[e06]CSS3啥时候能普及啊

    2011-02-24 10:32 [回复]
  5. 沙发
    Daisy_Leaf:

    回复 zhoufeng0401:不行

    2011-02-24 10:34 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐