CSS3中伪元素实现气泡框的代码（before、after）-css教程-PHP中文网

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

不言

发布： 2018-08-09 16:14:40

原创

2909人浏览过

本篇文章给大家带来的内容是关于css3中伪元素实现气泡框的代码（before、after），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

气泡框的原理其实也就是普通边框+三角形，CSS实现三角形也是利用了border属性
1、三角形是实心的

html代码：

<div class="wrap"></div>

登录后复制

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代码如下：

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

查看详情

.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，如下：
这里写图片描述