淘宝和QQ空间顶部工具栏三角形箭头的实现方式

之前转载过用边框实现三角形的技巧，早上重新看了一下淘宝跟QQ空间顶部工具栏的三角形实现方式，并记录下来

效果图：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.qq_div{
    width: 100px;
    height: 30px;
    margin: auto;
    text-align: center;
    padding: 50px;
    background:#50803F;
    color: #FFF/*这会使三角形的边框直接就默认为#FFF，否则是为#000*/
}
.qq_b {
    display: inline-block;
    zoom: 1;
    width: 0;
    height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    border-width: 3px 3px 0;
    border-style: solid;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;/*没有边框的地方直接设置为transparent，这样感觉可用性更佳，不用根据底色去设置，但IE6下就要用下面的hack实现*/
    _border-style: solid dotted dotted dotted;
    vertical-align: top;
}
.taobao_div{
    width: 100px;
    height: 30px;
    margin: auto;
    text-align: center;
    padding: 50px;
    background: #eee
}
.taobao_b{
    display: inline-block; /*需具备块级元素的属性*/
    width:0;
    height:0;
    border-width:4px 4px;
    border-style:solid;
    border-color:#666 #eee #eee;
    font-size:0;
    line-height:0;
    -webkit-transition:-webkit-transform .2s ease-in;
    -webkit-backface-visibility:hidden;
    -moz-transition:-moz-transform .2s ease-in;
    -o-transition:-o-transform .2s ease-in;
    transition:transform .2s ease-in;
}
.taobao_b:hover{ 
    border-color:#666 #eee #eee #eee; 
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    margin-top: -3px\9;   /*这几个个是IE的*/
    -moz-transform:rotate(180deg); 
    -moz-transform-origin:50% 30%;
    -webkit-transform:rotate(180deg);
    -webkit-transform-origin:50% 30%;
    -o-transform:rotate(180deg);
    -o-transform-origin:50% 30%;
    transform:rotate(180deg);
    transform-origin:50% 30%;
}
</style>
</head>

<body>
<div class="qq_div">
    <b class="qq_b"></b>
</div>
<div class="taobao_div">
    <a href="#" class="taobao_b"></a>
</div>
</body>
</html>
posted @ 2012-05-22 18:34  沫鱼  阅读(1558)  评论(0)  编辑  收藏  举报