Heim > Artikel > Web-Frontend > 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:
Empfohlene verwandte Artikel:
Was sind die in CSS3 hinzugefügten Pseudoklassen und welche ihre Funktionen?
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!