Code d'implémentation de boîtes à bulles utilisant des pseudo-éléments en CSS3 (avant, après)

Le contenu de cet article concerne le code (avant, après) pour implémenter des boîtes à bulles avec des pseudo-éléments en CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le principe de la boîte à bulles est en fait une bordure + triangle ordinaire. L'implémentation CSS du triangle utilise également l'attribut border
1 Le triangle est solide

code html :

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

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

Rendu :

2. Si vous avez besoin que le triangle soit creux, le rendu est le suivant, vous devez utiliser avant en même temps et après

le code CSS est le suivant :   

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

L'abréviation est la suivante :

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

Le principe est de combiner deux triangles Overlay, la couleur de la bordure inférieure du triangle est la même que celle du cadre extérieur, et la couleur de la bordure supérieure est réglée sur blanc afin de. pour mieux voir, j'ai mis la couleur du corps sur #ccc, comme suit :

Articles connexes recommandés :

Quelles sont les pseudo-classes ajoutées en CSS3 et quelles sont leurs fonctions ?

Quels sont les types de sélecteurs CSS ? Une brève introduction aux sélecteurs CSS couramment utilisés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!