Tip中的指示箭头实现 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> Tip中的指示箭头实现

Tip中的指示箭头实现

浏览:2037次出处信息

以前也写过类似的实现方案《用css的border属性实现三角》、《Tip中小三角的实现》。两种方法都是类似的方法：

利用 border 来实现2个三角形
将三角形叠在一起，实现一个类似的效果。

今天在小鱼的博客上看到了据说的终极方案。貌似很强大的样子，推荐一下，实现原理是这样的：

创建一个有 border 的四方形，用 CSS3 transfrom 作 45 度旋转
利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案

例子HTML：

1
<div class="tips"> 

2
    <div class="tips-text"> 

3
        Lorem ipsum dolor sit amet. 

4
    </div> 

5
    <div class="tips-top diamond"></div> 

6
</div>

CSS代码：

01
.diamond{ 

02
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')"; 

03
        filter: progid:DXImageTransform.Microsoft.Matrix( 

04
            M11=0.7071067811865475, 

05
            M12=-0.7071067811865477, 

06
            M21=0.7071067811865477, 

07
            M22=0.7071067811865475, 

08
            SizingMethod='auto expand'

09
        ); 

10
        -moz-transform: rotate(45deg); 

11
        -o-transform: rotate(45deg); 

12
        -webkit-transform: rotate(45deg); 

13
        -ms-transform: rotate(45deg); 

14
        transform:rotate(45deg); 

15
  
16
        } 

17
        :root .diamond{filter:none\9;}/*ie9 hack*/

18
  
19
        .tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} 

20
        .tips-top{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-top:1px solid #ffba00;top:-5px;top:-6px\9;_top:-7px;left:10px;}

具体的效果可以看：http://www.css88.com/demo/tipbox/index1.html

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：理解css中的长度单位

后一篇：CSS雪碧图会占用太多浏览器内存吗？ >>

文章信息

作者：愚人码头来源： WEB前端开发
标签：箭头
发布时间：2012-04-22 15:04:42

近3天十大热文