详解使用CSS气泡框实现方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解使用CSS气泡框实现方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3458字，纯文字阅读大概需要5分钟。

内容图文

拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就 是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。 如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。

1、把div的width和height都设为0，四边都形成三角形。

# test{width:0; height:0; border-width:75px; border-style:solid; border-color:#09F #990 #933 #0C9;}

2、在主流浏览器中检测一下，发现IE6中存在一个小问题，上下边能形成三角形，左右两边仍然还是梯形。

解决：把div的font-size和line-height都设为0的，此时，div的四边在IE6下都能形成完美的三角形。

#test{ width:0; height:0; border-width:75px; border-style:solid; border-color:#09F #990 #933 #0C9; font-size:0; line-height:0;}

3、我们只需要其中的一个三角形，那么只需要将其他三边的color设置为透明或者跟页面背景一样的颜色，就能模拟出一个三角来，推荐将其他三边颜色设置为透 明，即color的值为transparent，如果其他三边颜色跟页面背景一样，虽然视觉上只能看到一个三角，但背景颜色一旦改变，其他三边颜色也要随 之改变。

#test{ width:0; height:0; border-width:75px; border-style:solid; border-color:#09F transparenttransparent; font-size:0; line-height:0;}

4、在IE6下transparent无效，其他三边被设置成默认的黑色了。

解决：把border-style设置为dashed后，IE6下其他三边就能透明了。

5、到这一步我们已经成功的模拟出了一个小三角，下一步我们把这个小三角同矩形框结合起来。先设置一个矩形框，然后把小三角定位到矩形框上。先来写出HTML结构：

<div class="tag">

<em></em>

CSS气泡框实现

</div>

.tag{ width:300px; height:100px; border:5px solid #09F; position:relative;}

.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid dashed dashed; border-color:#09F transparent transparent;font-size:0; line-height:0;}

6、

现在指示方向的三角形箭头是实心的，而我们想要的是镂空的效果，这里我们再叠加一个同气泡框背景颜色一样的小三角，然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整，如下：

<div class="tag">

<em></em>

<span></span>

CSS气泡框实现

</div>

CSS样式修改为：

.tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF;}

.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid dashed dashed; border-color:#09F transparent transparent;font-size:0; line-height:0;}

.tag span{display:block; border-width:20px; position:absolute; bottom:-33px; left:100px;border-style:solid dashed dashed; border-color:#FFF transparent transparent;font-size:0; line-height:0;}

注意：叠加的小三角span的bottom值并不是border-width的值，两个小三角bottom的差值理论上应该是2(border-width)2的平方根。

最后来把代码优化一下，以便在后期更容易维护，完整的HTML结构：

<div class="tag">

<div class="arrow">

<em></em><span></span>

</div>

CSS气泡框实现

</div>

CSS样式修改为：

.tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF;}

.arrow{ position:absolute; width:40px; height:40px; bottom:-40px; left:100px; }

.arrow *{ display:block; border-width:20px; position:absolute; border-style:solid dashed dasheddashed; font-size:0; line-height:0; }

.arrow em{border-color:#09F transparent transparent;}

.arrow span{border-color:#FFF transparent transparent; top:-7px;}

以上就是详解使用CSS气泡框实现方法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的详解使用CSS气泡框实现方法全部内容，希望文章能够帮你解决详解使用CSS气泡框实现方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端