Code zur Implementierung von Bubbleboxen mithilfe von Pseudoelementen in CSS3 (vorher, nachher)

Der Inhalt dieses Artikels befasst sich mit dem Code (vorher, nachher) für die Implementierung von Bubble-Boxen mit Pseudoelementen in CSS3. Ich hoffe, dass er für Sie hilfreich ist.

Das Prinzip der Blasenbox ist eigentlich ein gewöhnlicher Rahmen + Dreieck. Die CSS-Implementierung des Dreiecks verwendet auch das Rahmenattribut
1 Das Dreieck ist solide

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. Wenn das Dreieck hohl sein soll, ist das Rendering wie folgt: Sie müssen sowohl davor als auch danach verwenden

Der CSS-Code lautet wie folgt:                                                                                                                                                     , habe ich die Körperfarbe wie folgt auf #ccc gesetzt:

Empfohlene verwandte Artikel:

Was sind die in CSS3 hinzugefügten Pseudoklassen und welche ihre Funktionen?

Welche Arten von CSS-Selektoren gibt es? Eine kurze Einführung in häufig verwendete CSS-Selektoren

Das obige ist der detaillierte Inhalt vonCode zur Implementierung von Bubbleboxen mithilfe von Pseudoelementen in CSS3 (vorher, nachher). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!