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

最新推荐文章于 2023-07-09 20:00:25 发布

前端岚枫

最新推荐文章于 2023-07-09 20:00:25 发布

阅读量2.3k

点赞数 1

分类专栏： css 文章标签： css class xhtml filter border div

本文链接：https://blog.csdn.net/lfcss/article/details/7995116

版权

css 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

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

代码如下：

预览效果如下在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>

效果：

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

前端岚枫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
用 CSS实现Bubble提示框的两种方法

第一种方法：主要是通过css border属性来实现，两个小三角形叠加，实现小箭头；代码如下：无标题文档*{ margin:0; padding:0;}body{ padding:20px; }.tips{ background:#FFF8E8; border:1px solid #FFBA00; padding:10px; position:abso
复制链接

扫一扫