嗨，guys，还在为上下左右的tip揪心嘛，还在使用利用图片、符号、多层关系或者border的2个三角形的重叠来实现？ 既然它不完美，那就来看一下利用CSS3的transfrom的方法是否适合你。
概述：
CSS视觉格式化模型描述一个坐标系统上的每个元素位置的坐标系。定位和大小在这个坐标空间可以被认为是用像素表示,在起源点开始以向右和向下的实际值出发。transform属性可以修改此坐标空间。使用转换，元素可以被转化、旋转和扩展在二或三维空间。
重点来了~我们要用到的是transfroms的变换渲染模型：
为' transform '的属性建立一新的局部坐标系元素将它应用到指定' none '以外的值。 通过元素的变换矩阵，局部坐标系统会渲染成元素的映射 。 转换是累加的。 也就是说，元素在他们的父坐标系统建立其局部坐标系统。 从用户的角度看，一个元素有效积累所有的transform属性以适用于其祖先以及任何局部的改变。这些transform的积累为元素定义通用变换矩阵（CTM）。
EXAMPLE
-
div {
-
transform:translate(100px,100px);
-
}
此变换100像素在X和Y方向移动的元素。
EXAMPLE
-
div {
-
height:100px;100px;
-
transform:translate(80px,80px)scale(1.5,1.5)rotate(45deg);
-
}
-
<div style="transform: translate(80px, 80px)">
-
<div style="transform: scale(1.5, 1.5)">
-
<div style="transform: rotate(45deg)"></div>
-
</div>
-
</div>
此变换移动80像素元素在X和Y方向，然后由150％尺度的元素，那么它的Z轴顺时针旋转45°。 需要注意的规模和旋转操作元素的中心，因为该元素具有“改造来源的50% 50%的默认。需要注意的是相同的渲染，可以由嵌套元素的等效变换得到。
ok 书归正传，Tip来了，总共分为两步：
1.我们要创建一个有border的四方形，用CSS3 transfrom 作 45 度旋转。
2.IE的实现-利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案。
EXAMPLE
-
.tips {
-
200px;
-
position:relative;
-
padding:10px;
-
border:1pxsolid blue;
-
background-color:skyBlue;
-
border-radius:5px;
-
}
-
.diamond{
-
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
-
filter:progid:DXImageTransform.Microsoft.Matrix(
-
M11=0.7071067811865475,
-
M12=-0.7071067811865477,
-
M21=0.7071067811865477,
-
M22=0.7071067811865475,
-
SizingMethod='auto expand'
-
);
-
-moz-transform:rotate(45deg);
-
-o-transform:rotate(45deg);
-
-webkit-transform:rotate(45deg);
-
-ms-transform:rotate(45deg);
-
transform:rotate(45deg);
-
position:absolute;
-
10px;
-
height:10px;
-
background-color:skyBlue;
-
display:block;
-
font-size:0;
-
}
-
:root .diamond{filter:none9;}/*ie9 hack*/
-
.tip-top{
-
border-top:1pxsolid blue;
-
border-left:1pxsolid blue;
-
left:10px;
-
top:-6px;
-
}
-
.tip-left{
-
border-bottom:1pxsolid blue;
-
border-left:1pxsolid blue;
-
left:-6px;
-
top:20px;
-
}
-
.tip-bottom{
-
border-bottom:1pxsolid blue;
-
border-right:1pxsolid blue;
-
left:10px;
-
bottom:-6px;
-
}
-
.tip-right{
-
border-top:1pxsolid blue;
-
border-right:1pxsolid blue;
-
right:-6px;
-
top:20px;
-
}
-
<div class="tips">
-
<i class="diamond tip-top"></i>
-
<i class="diamond tip-bottom"></i>
-
<i class="diamond tip-left"></i>
-
<i class="diamond tip-right"></i>
-
<div class="text"></div>
-
</div>