今日、私はHTML/CSSを使用して、QQに似たチャットバブルを作成します。
重要な場所のスタイル設定は次のとおりです。次に、HTMLおよびCSSコードを投稿します（それほど多くありません）。
ステップ1：レイアウトメッセージは、Div+Floatレイアウトを使用します。各メッセージはDivタグに巻き付けられ、2つのDivがユーザーアイコンとユーザーメッセージコンテンツをラップします。左のメッセージで、最初にフローティングをクリアしてから、フロートを設定します：左。このようにして、ユーザーアイコンとメッセージのコンテンツを同じ行に表示できます。ユーザーアイコンは左側にあり、メッセージはユーザーアイコンに近いものです。
右側では、最初にフローティングをクリアします。次に、フロートを設定します：右にあるため、ユーザーアイコンとメッセージが同じ行に表示されます。アイコンは右端にあります。アイコンの左側はメッセージです。
ステップ2：丸い長方形を設定しますボーダーラジウス：7px;ステップ3：三角矢印
＆n
divの幅と高さを0に設定し、各三角形の色とサイズを境界幅と色を設定することで設定することができます。
ここでは、3つの三角形の色が透明になるように設定されています。目に見えるように三角形を残してください。
.triangle {0px; .triangle {0px;キーポイント4：三角形の尾は長方形のボックスに続きました相対的なポジショニングを使用します。長方形のボックスの側面にいつでも固定できます。
位置：相対;
すべてのコード：
<html> <head> <style> / *バブルスタイル * / .sender {clear：blote;} .sender div：nth-of-type（1）{float：left;} .sender div：nth-of-type （2）{バックグラウンドコライン：左：10px 10px 10px 0px;} {width：50px;} .Re Organ {clear：both;} .Receiver div：nth-child（1）{float：light;} .Receiver div：nth-type（2）float：右; ：透明な透明性：-16px;} ;ポジション：-16px;} </head> < > </div> <div> div class = left_triangle> </div> <span> = chattemplateexample2_files/cat.jpg> </div> <div class = right_triangle> </div> <span> hello world d </span> </div> </div> </body> </html>上記は、この記事のすべての内容です。