本篇文章给大家带来的内容是关于css3中伪元素实现气泡框的代码（before、after），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
气泡框的原理其实也就是普通边框+三角形，CSS实现三角形也是利用了border属性
1、三角形是实心的
html代码：
css代码：
.wrap{ position: relative; width: 600px; height: 400px; border: 10px solid #3377aa; border-radius: 20px; }.wrap::before{ position: absolute; content: ''; width: 0; height: 0; border-width: 40px 20px; /*上下、左右的border值*/ border-style: solid; border-color: #3377aa transparent transparent; /*只设置上面border的颜色，左右和下面都设置为透明，会出现一个倒三角*/ bottom: -80px; /*以下给三角形定位，使其处于底部居中处*/ left: 50%; margin-left: -20px; }
效果图： 
立即学习“前端免费学习笔记（深入）”；
2、如果需要三角形是空心的，效果图如下，需要同时使用before和after 
css代码如下：
.wrap::before{ position: absolute; content: ''; width: 0; height: 0; border-width: 40px 20px; border-style: solid; border-color: #3377aa transparent transparent; bottom: -80px; left: 50%; margin-left: -20px; }.wrap::after{ position: absolute; content: ''; width: 0; height: 0; border-width: 40px 20px; border-style: solid; border-color: #fff transparent transparent; /*白色的倒三角*/ bottom: -60px; /*位置和往上一些*/ left: 50%; margin-left: -20px; }
简写的话是这样：
.wrap::before, .wrap::after{ position: absolute; content: ''; width: 0; height: 0; border-width: 40px 20px; border-style: solid; border-color: #3377aa transparent transparent; bottom: -80px; left: 50%; margin-left: -20px; } .wrap::after{ border-color: #fff transparent transparent; bottom: -60px; }
原理就是将两个三角形叠加，下面的三角形border颜色和外面的框一致，上面的border颜色设置为白色，为了能更好看清，我将body颜色设为#ccc，如下： 
相关文章推荐：
CSS3中增加的伪类有哪些及其作用是什么？
css选择器有哪些类型？css常用选择器的简单介绍
以上就是CSS3中伪元素实现气泡框的代码（before、after）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610988.html
微信扫一扫 
支付宝扫一扫 
