本篇文章给大家带来的内容是关于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，如下：
相关文章推荐：
