Code for implementing bubble boxes using pseudo elements in CSS3 (before, after)

This article brings you the code (before, after) for implementing bubble boxes with pseudo elements in CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The principle of the bubble box is actually the ordinary border triangle. The CSS triangle implementation also uses the border attribute
1. The triangle is solid

html code:

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

css code:

.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; 
        }

Rendering:

2. If you need the triangle to be hollow, the rendering is as follows, you need to use both before and after

css code is as follows:                                                                                                                                                                                             

.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;        
         }

The abbreviation is like this:

        .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;       
               }

The principle is to superimpose two triangles, the border color of the triangle below and the outside The boxes are the same, and the border color above is set to white. In order to see it better, I set the body color to #ccc, as follows:

Recommended related articles:

What are the pseudo-classes added in CSS3 and what are their functions?

What are the types of css selectors? A brief introduction to commonly used css selectors

The above is the detailed content of Code for implementing bubble boxes using pseudo elements in CSS3 (before, after). For more information, please follow other related articles on the PHP Chinese website!