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

不言
Release: 2018-08-09 16:14:40
Original
2582 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)

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!