[转]Tip中的指示箭头实现

以前也写过类似的实现方案《用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

转载请注明转自《Tip中的指示箭头实现》

转载于:https://www.cnblogs.com/cherrys/archive/2012/04/23/2466084.html