Heim  >  Artikel  >  Web-Frontend  >  Code zur Implementierung von Bubbleboxen mithilfe von Pseudoelementen in CSS3 (vorher, nachher)

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

不言
不言Original
2018-08-09 16:14:402603Durchsuche

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: &#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; 
        }

Rendering:


2. Wenn das Dreieck hohl sein soll, ist das Rendering wie folgt: Sie müssen sowohl davor als auch danach verwenden


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

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? Code zur Implementierung von Bubbleboxen mithilfe von Pseudoelementen in CSS3 (vorher, nachher)

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn