提示的小三角
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<style>
/* 提示框样式*/
.mui_tip{
display:inline-block;
padding:5px;
border:1px solid #F90;
position:relative;
margin:0 5px;
}
/* 定义三角公共样式 */
.mui_tip s{
display:block;
width:6px;
height:6px;
border-top:1px solid #F90;
border-right:1px solid #F90;
background-color:#FFF;
position:absolute;
}
/* 三角在上边 */
.mui_tip s.t{
top:-4px;
top:-5px\9;
left:30%;
margin-left:-3px;
-o-transform: rotate(-45deg); /* Opera */
-webkit-transform: rotate(-45deg); /* Webkit */
-moz-transform: rotate(-45deg); /* Firefox */
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.6669156, M12=0.645133265, M21=-0.645133265, M22=0.6669156);
}
/* 三角在右边 */
.mui_tip s.r{
right:-4px;
right:-3px\9;
top:50%;
margin-top:-3px;
-o-transform: rotate(45deg); /* Opera */
-webkit-transform: rotate(45deg); /* Webkit */
-moz-transform: rotate(45deg); /* Firefox */
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067812, M12=-0.7071067812, M21=0.7071067812, M22=0.7071067812);
}
/* 三角在底部*/
.mui_tip s.b{
bottom:-4px;
bottom:-3px\9;
left:30%;
margin-left:-3px;
-o-transform: rotate(135deg); /* Opera */
-webkit-transform: rotate(135deg); /* Webkit */
-moz-transform: rotate(135deg); /* Firefox */
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-0.6946583705, M12=-0.7193398003, M21=0.7193398003, M22=-0.6946583705);
}
/* 三角在左边 */
.mui_tip s.l{
left:-4px;
left:-5px\9;
top:50%;
margin-top:-3px;
-o-transform: rotate(225deg); /* Opera */
-webkit-transform: rotate(225deg); /* Webkit */
-moz-transform: rotate(225deg); /* Firefox */
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-0.7071067812, M12=0.7071067812, M21=-0.7071067812, M22=-0.7071067812);
}
</style>
<body>
<div class="mui_tip">欢迎您使用！<s class="t"></s></div>
<div class="mui_tip">垂直居中的几种实现方法<s class="r"></s></div>
<div class="mui_tip">蛋疼的ie<s class="b"></s></div>
<div class="mui_tip">html语义化<s class="l"></s></div>
</body>
</html>
