技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> Tip中的指示箭头实现

Tip中的指示箭头实现

浏览:1561次  出处信息

以前也写过类似的实现方案《用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技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1