提示的小三角

89 阅读 0 评论 59 点赞

我是靠谱客的博主迷人外套，最近开发中收集的这篇文章主要介绍提示的小三角，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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>

/* 定义三角公共样式 */
.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:-5px9;
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:-3px9;
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:-3px9;
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:-5px9;
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>

转载于:https://www.cnblogs.com/chenkg/p/4942869.html