兼容所有浏览器不用图片实现带边border的三角形

时间：2012-08-21 编辑：简简单单来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Pure CSS Tips Angle</title>
	<style>
	*{padding:0;margin:0;}
	body{padding:20px;font:16px/1.5 Georgia;}
	
	.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);
	}
	:root .diamond{filter:none9;}
	
	.tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;}
	.tips-angle{position:absolute;display:block;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-top:1px solid #ffba00;top:-5px;top:-6px9;left:10px;}
	</style>
</head>
<body>

<div class="tips">
	<div class="tips-text">
		Lorem ipsum dolor sit amet.
	</div>
	<div class="tips-angle diamond"></div>
</div>

</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一个： javascript中鼠标移动到文本上弹出可移动可关闭窗口层的代码
下一个： js中可访问弹出菜单/窗口实现代码

推荐专题

最新下载

热门教程

兼容所有浏览器不用图片实现带边border的三角形

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程