您的位置：首页 > Web前端 > CSS

用 CSS实现Bubble提示框的两种方法

2012-09-19 11:09 661 查看

第一种方法：主要是通过css border属性来实现，两个小三角形叠加，实现小箭头；

代码如下：

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{ margin:0; padding:0;}

body{ padding:20px; }

.tips{ background:#FFF8E8; border:1px solid #FFBA00; padding:10px; position:absolute;}

.trangle1{border-left:5px dashed transparent;border-right:5px dashed transparent;border-bottom:5px solid #FFBA00;width:0;height:0;font-size:0; position:absolute; top:-6px; left:29px;}

.trangle2{border-left:5px dashed transparent;border-right:5px dashed transparent;border-bottom:5px solid #FFF8E8;width:0;height:0;font-size:0; position:absolute; top:1px; left:-5px;}

</style>

</head>

<body>

<div class="tips">

   <p> CSS实现Bubble提示框的方法</p>

    <div class="trangle1">

    <div class="trangle2"></div>

    </div>

   </div>

</body>

</html>

预览效果如下在ie中测试的：

第二种方法；主要是参考sofish的解决方法：主要是利用css3的transform方法和filter的一些兼容方法；

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</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:none\9;}



   .tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;}

   .tips-angle{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;left:10px;}

   </style>

</head>

<body>

<div class="tips">

   <div class="tips-text">

       CSS实现Bubble提示框的方法

   </div>

   <div class="tips-angle diamond"></div>

</div>

</body>

</html>

效果：

总结：两种方法各有个的优缺点，不过第一种在像素精确上有一定的差距，第二种好像对有的浏览器测支持性不太好

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css class xhtml filter border div

相关文章推荐

新的分享

章节导航