Wie implementiert man den Chat-Blaseneffekt in CSS3? (Codebeispiel)

Der Inhalt dieses Artikels besteht darin, die CSS3-Methode zur geschickten Erzielung des Chat-Blaseneffekts vorzustellen. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Die Überarbeitung der mobilen Seite, die ich vor einiger Zeit gewagt habe, ist abgeschlossen. Der vorherige Seitenstil ist flacher, wechselt vom dunklen zum hellen Hintergrund, entfernt mehr Schatten und bietet Benutzern einen einfachen Erlebnisstil. haha, ich bin kein Designer, aber ich werde zu viel kommentieren. Interessierte Freunde können direkt auf die mobile Homepage von idarex gehen.

Alle Stile in dieser Überarbeitung sind von Orange geschrieben, deshalb werde ich sie in Raten mit Ihnen teilen

Kommen wir nun zum Punkt Blasen, auf die wir uns geeinigt haben?

Traditionelle Chat-Blase

Was ist eine traditionelle Chat-Blase? Gehen Sie einfach zum Bild oben

Der Code lautet wie folgt

<p></p>

<style>
  .comment {
    width: 150px;
    height: 35px;
    position: relative;
    margin: 30px auto 0;
    background: #f8ac09;
    border-radius: 5px;
  }

  .comment:after {
    content: &#39;&#39;;
    width: 0;
    height: 0;
    position: absolute;
    top: 5px;
    right: -16px;
    border: solid 8px;
    border-color: transparent transparent transparent #f8ac09;
    font-size: 0;
  }
</style>

Jeder hat von den Implementierungsmethoden wie abgerundeten Rechtecken und Dreiecken gehört. Das Prinzip von Dreiecken besteht darin, dass der Code im obigen Beispiel kopiert und geändert werden kann Erkunden Sie die Implementierung von Dreiecken mit Attributen. border-color

Hinweis: IE8 und frühere Versionen bieten keine sehr gute Unterstützung für transparente Ränder. Sie können die Mängel der niedrigeren Version ignorieren, da die meisten Browser normal angezeigt werden. Wenn Sie kompatibel sein müssen, setzen Sie das transparente Attribut auf die Haupthintergrundfarbe anstelle der Blasenhintergrundfarbe (vorausgesetzt, der Hintergrund ist einfarbig).

Ich glaube, jeder weiß es, deshalb werde ich hier nicht auf Details eingehen, aber lassen Sie uns über andere Implementierungsmethoden sprechen.

Der dreieckige Teil kann hier durch ein Quadrat ersetzt werden, um den gleichen Effekt zu erzielen. Die Methode besteht darin, das kleine Quadrat so zu drehen, dass ein Teil davon freiliegt. Der Code lautet wie folgt:

.comment {
  position: relative;
  width: 150px;
  height: 35px;
  background: #f8ac09;
  border-radius: 5px;
  margin: 30px auto 0;
}

.comment:after {
  content: '';
  position:absolute;
  top: 10px;
  right: -4px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-color: #f8ac09;
}

Der Nachteil ist, dass das kleine Dreieck nur ein rechtwinkliges Dreieck sein kann. Wenn es viele Transformationen gibt, fühlt es sich an nicht so direkt wie die erste Methode. Der Browser ist mit dem transform(2D)-Attribut kompatibel

Insgesamt ist es ziemlich gut, man kann es damit verwenden Vertrauen in mehrere Methoden, und es gibt keine größeren Kompatibilitätsprobleme.

Realer Fall

Der Designentwurf hier hat einen zusätzlichen Rand, wie wäre es, wenn Sie den Designentwurf direkt hochladen

? Denken Sie darüber nach, wie Sie damit umgehen sollen. Lassen Sie uns das oben Gesagte noch einmal durchgehen.

Die erste Methode selbst ist

transparent. Wie man sie einstellt border ist ein Problem. Lassen Sie uns das erst einmal nicht berücksichtigen. border

Wenn Sie bei der zweiten Methode eine kleine quadratische Drehung verwenden, ist die Ebenenüberlagerung ein Problem, da der Blasenhintergrund im Designentwurf

Werfen wir zunächst einen Blick auf den Implementierungscode rgba(247, 188, 10, 0.03)

.comment {
  width: 150px;
  height: 35px;
  position:relative;
  margin: 30px auto 0;
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
  border-radius: 5px;
}

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
}

Der Effekt ist wie folgt

Bei der obigen Idee gibt es ein Problem, da das kleine Quadrat einen Teil der Blase überlappt und es immer Probleme damit geben wird Jemand hat gesagt, dass es in Ordnung ist, faul zu sein und ihn transparent zu machen. Die Hintergrundfarbe wird extrahiert und dann überlagert (weil jeder bemerkt hat, dass der Gesamthintergrund des Designentwurfs einfarbig ist)

Wenn Wenn wir es nach dieser Idee umsetzen, kommt das Problem wieder. Die beiden spezifischen Fragen lauten wie folgt.

1. Wenn das kleine Quadrat darüber gelegt wird, wird der Rand der linken Hälfte des kleinen Quadrats angezeigt.

.comment {
  width: 150px;
  height: 35px;
  position: relative;
  margin: 30px auto 0;
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
  border-radius: 5px;
}

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position:absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
}

Der Effekt ist wie folgt , die rechte Seite des abgerundeten Rechtecks ​​ist zwar abgedeckt, aber der Rand auf der linken Seite des kleinen Quadrats wird angezeigt

Die Verarbeitungsmethode ist diese.

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -5px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px #fbe2a0;
  border-style: solid solid none none;
}

Wir haben festgestellt, dass das Problem gelöst ist. Die Wirkung ist wie folgt

Der Designentwurf liegt vor

Es ist in diesem Fall zum persönlichen Testen machbar, basiert aber auf dem Grundsatz der SeriositätpaddingWenn es ist zu klein, welche Probleme werden auftreten? padding-right

Wir fügen Text zu S. hinzu.

<p>Hello,orange.Welcome to FrontEnd World!</p>

Der Effekt ist wie folgt

Wir stellen fest, dass die untere rechte Ecke des Buchstabens o von der linken Seite des kleinen Quadrats von bedeckt ist Natürlich kann es über das Attribut

gehackt werden. z-index

2. Wenn sich das kleine Quadrat unter dem abgerundeten Rechteck befindet, wird der rechte Rand des abgerundeten Rechtecks ​​vollständig angezeigt. Diese Lösung ist unangemessen, aber ich werde sie nicht erklären ausführlich.

Die Mängel der oben genannten Methoden liegen ebenfalls auf der Hand. Wie können wir sie also konsequenter durchführen und die Muskeln und Knochen nicht entsprechend der veränderten Nachfrage schädigen?

Wir nutzen auch den Dreiecksplan! Was bedeutet das nicht, dass die Dreieckslösung nicht machbar ist?

Ein Dreieck ist nicht machbar. Was diese beiden betrifft, haben wir

s Bruder after eingeladen. Der eigentliche Code des Projekts lautet wie folgtbefore

.reply {
  position: relative;
  margin: 0.672rem 0 0.096rem 0;
  padding: 0.408rem 0.816rem;

  border: 1px solid rgba(#fcb908, 0.35);
  border-radius: 0.2rem;
  background-color: rgba(#f7bc0a, 0.03);

  &:after {
    content: '';
    width: 0px;
    height: 0px;
    border-color:  transparent transparent #faf8f3 transparent ;
    border-style: solid;
    border-width: 6px;
    position: absolute;
    top: -11px;
    border-radius: 3px;
    left: 18px;
    right: auto;
  }

  &:before {
    content: '';
    width: 0px;
    height: 0px;
    border-color: transparent transparent rgba(#fcb908, 0.35) transparent;
    border-style: solid;
    border-width: 7px;
    position: absolute;
    top: -14px;
    border-radius: 3px;
    left: 17px;
    right: auto;
  }
}

注：这段代码用的是 SASS 进行预编译，如果从头仔细看到这里的话不难理解，两个三角形叠加，大三角形颜色是边框的颜色，小三角形是内部背景色，小三角形绝对定位时向下移 3px 把圆角矩形的一部分上边框遮挡，这样小三角下部也有溢出，具体在两像素之内，实际上不存在遮挡文本问题。

总结

实际问题解决的方法很多，就看大家怎么去思考，这个方案也不是最满意的方案，因为多了一个伪元素，主要还是设计思想的多样性，总之 css 很灵活。

有人不禁会问，这里设计稿给的是向上的箭头，为什么例子里却都是向右的，这里向右的都是我写的 demo ，理解原理的话，改变个位置方向都是大同小异。

Das obige ist der detaillierte Inhalt vonWie implementiert man den Chat-Blaseneffekt in CSS3? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!