CSS zum Erzielen eines Chat-Blaseneffekts

1. Rendern

JD-Effekt

Simulationseffekt

2. Grundsatz

Bereiten Sie eine Box mit Höhe und Breite von 0 vor

Einen Rahmen um dieses Feld setzen

Ersetzen Sie die unnötigen Ränder durch transparent und stellen Sie die entsprechenden Farben dort ein, wo sie angezeigt werden sollen

Wenn Sie die Größe ändern möchten, legen Sie einfach die border-width fest

Setzen Sie die font-size und line-height auf 0, um die Anzeige nicht zu beeinträchtigen.

Zum Schluss mit der Positionierung an die gewünschte Position bringen

3. Code

HTML-Struktur

<div Klasse="Quadrat">
    <p Klasse="Dreieck"></p>
</div>

CSS-Stile

.Quadrat {
  Position: relativ;
  Breite: 400px;
  Höhe: 200px;
  Hintergrund: grün;
  Rand: 150px automatisch;
}
.Dreieck {
	Position: absolut;
  oben: -40px;
  links: 50%;
  Rand links: -20px;
  Breite: 0;
  Höhe: 0;
  Rahmenstil: durchgezogen;
  Rahmenbreite: 20px;
  Rahmenfarbe: transparent transparent rot transparent;
  Schriftgröße: 0;
  Zeilenhöhe: 0;
}

Dies ist das Ende dieses Artikels über CSS-Chatblasen. Weitere relevante Inhalte zu CSS-Chatblasen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!