以前也写过类似的实现方案《用css的border属性实现三角》、《Tip中小三角的实现》。两种方法都是类似的方法：
- 利用 border 来实现2个三角形
- 将三角形叠在一起，实现一个类似的效果。
今天在小鱼的博客上看到了据说的终极方案。貌似很强大的样子，推荐一下，实现原理是这样的：
- 创建一个有 border 的四方形，用 CSS3 transfrom 作 45 度旋转
- 利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案
例子HTML：
2 |
<div class="tips-text"> |
3 |
Lorem ipsum dolor sit amet. |
5 |
<div class="tips-top diamond"></div> |
CSS代码：
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' |
10 |
-moz-transform: rotate(45deg); |
11 |
-o-transform: rotate(45deg); |
12 |
-webkit-transform: rotate(45deg); |
13 |
-ms-transform: rotate(45deg); |
14 |
transform:rotate(45deg); |
17 |
:root .diamond{filter:none\9;} |
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
