淘宝和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>
