以前也写过类似的实现方案《用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 |
M 11 = 0.7071067811865475 , |
05 |
M 12 = -0.7071067811865477 , |
06 |
M 21 = 0.7071067811865477 , |
07 |
M 22 = 0.7071067811865475 , |
08 |
SizingMethod= 'auto expand' |
10 |
-moz-transform: rotate( 45 deg); |
11 |
-o-transform: rotate( 45 deg); |
12 |
-webkit-transform: rotate( 45 deg); |
13 |
-ms-transform: rotate( 45 deg); |
14 |
transform:rotate( 45 deg); |
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
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习