CSS realisiert den Sprechblaseneffekt mit scharfen Ecken im kleinen Chat-Dialogfeld mit scharfen Ecken

1. Verwenden Sie CSS, um ein kleines Chat-Dialogfeld mit spitzen Ecken und eine Sprechblase mit spitzen Ecken zu zeichnen. Lassen Sie mich Ihnen zuerst das Effektbild zeigen. Wenn es Ihnen gefällt, sehen Sie sich bitte den Beispielcode an.

2. Wirkung

3. Code

css;Werkzeugleiste:false"><Stil>
#Gesprächsblase
  Breite: 160px; Höhe: 80px;
  Hintergrund: rot;
  Position: relativ;
  Rahmenradius: 10px;
  Rand links: 20px;
}
#talkbubble:vor {
  Inhalt: "";
  Position: absolut;
  rechts: 100%; 
  oben: 26px;
  Rahmen oben: 13px durchgehend transparent;
  Rand rechts: 26px durchgehend rot;
  Rahmen unten: 13px durchgehend transparent;
}
</Stil>
<div id="talkbubble"></div>

Ergänzung: Reines CSS zur Realisierung einer scharfen Eckenverarbeitung im Blasendialogfeld

Schauen wir uns zunächst das Wirkungsdiagramm an:

Einfacher und grober Code:

html:

    <div Klasse="Dialogbox">
                      <span class="bot"></span>
                      <span class="top"></span>
                    </div>

weniger:
      .dialogfeld {
        Position: relativ;
        Spanne {
          Breite: 0; 
          Höhe: 0; 
          Schriftgröße: 0; 
          Überlauf: versteckt; 
          Position: absolut;
          &.bot{
            Rahmenbreite: 15px; 
            Rahmenstil: durchgezogen gestrichelt gestrichelt; 
            Rahmenfarbe: transparent transparent #F9743A transparent; 
            links: 15px; 
            oben: -29px;
          }
          &.Spitze{
            Rahmenbreite: 13px; 
            Rahmenstil: durchgezogen gestrichelt gestrichelt; 
            Rahmenfarbe:transparent transparent #fff transparent; 
            links: 17px; 
            oben: -25px;
          }
        }
      }

Erklärung im Klartext:

Wenn Sie scharfe Ecken in andere Richtungen wünschen, passen Sie die Reihenfolge boder-color an (oben, rechts, unten, links).

Das Hauptprinzip besteht wahrscheinlich darin, zwei kleine Dreiecke gleicher Form, aber unterschiedlicher Proportionen zu haben, einen durchgehenden dreieckigen Bot mit der gleichen Farbe wie der Hintergrund und ein Oberteil mit weißem Hintergrund, wobei das Oberteil den Bot bedeckt, und dann ihre Größen anzupassen (im Allgemeinen sollte der durchgehende Dreiecksblock größer sein als der weiße Block, damit an den Kanten die Farbe zu sehen ist).

Zum Schluss habe ich alles Mögliche versucht, um eine Überlappung zu erzielen (weiße Oberseite oben, durchgehende Unterseite) und schließlich die absoluten Positionierungsparameter (links, oben) angepasst, um eine nahtlose Überlappung zu erzielen. Okay, es ist erledigt. Verstanden?

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS ein kleines Chat-Dialogfeld mit spitzen Ecken und einem spitzen Sprechblaseneffekt erstellen können. Weitere relevante CSS-Inhalte für Chat-Dialogfelder mit spitzen Ecken finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!