html 伪元素原理,CSS3中伪元素实现气泡框的代码（before、after）

本篇文章给大家带来的内容是关于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常用选择器的简单介绍