Code for implementing bubble boxes using pseudo elements in CSS3 (before, after)-CSS Tutorial-php.cn

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

不言

Release： 2018-08-09 16:14:40

Original

2640 people have browsed it

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>

Copy after login

css code:

.wrap{
            position: relative;            
            width: 600px;            
            height: 400px;            
            border: 10px solid #3377aa;            
            border-radius: 20px;        
    }
.wrap::before{
            position: absolute;            
            content: &#39;&#39;;            
            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; 
        }

Copy after login

Rendering:

2. If you need the triangle to be hollow, the rendering is as follows, you need to use both before and after
Code for implementing bubble boxes using pseudo elements in CSS3 (before, after)

css code is as follows:

.wrap::before{
            position: absolute;            
            content: &#39;&#39;;            
            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: &#39;&#39;;            
                width: 0;            
                height: 0;            
                border-width: 40px 20px;            
                border-style: solid;            
                border-color: #fff transparent transparent;
                /*白色的倒三角*/
            bottom: -60px; 
            /*位置和往上一些*/
            left: 50%;            
            margin-left: -20px;        
         }

Copy after login

The abbreviation is like this:

        .wrap::before,        
        .wrap::after{
                    position: absolute;            
                    content: &#39;&#39;;            
                    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;       
               }

Copy after login

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:
Code for implementing bubble boxes using pseudo elements in CSS3 (before, after)