Implement QQ chat bubbles and QQ chat bubbles

Implement QQ chat bubbles and QQ chat bubbles
Today, I used HTML/CSS to create a chat bubble similar to QQ. below is:
Next, let's talk about the style settings in the key areas, and then paste the html and css Code (not much ).

Step 1: Layout
The message layout is div + float. Each message is enclosed by a DIV label, and two divs are placed in it to enclose the user icon and user message content respectively. The message on the left is cleared first, and then float: left is set so that the user icon and message content can be displayed in the same line. The user icon is on the left and the message content is next to the user icon.
The message on the right is cleared first, and then float: right is set. The user icon and message are displayed in the same line. The icon is on the rightmost and the message is displayed on the left.

Step 2: Set the rounded rectangle

border-radius:7px;     

Step 3: triangle arrow
Set the width and height of the DIV to 0 and the Border width to show a rectangle composed of four triangles, you can set the color and size of each triangle by setting the border Width and color.
Set the color of the three triangles to transparent, leaving only one triangle visible.

    .triangle{        width: 0px;        height: 0px;        border-width: 15px;        border-style: solid;        border-color: red blue green gold;    }

    .triangle{        width: 0px;        height: 0px;        border-width: 15px;        border-style: solid;        border-color: transparent transparent transparent red;    }

Key Aspect 4: triangle rectangular frame
By using relative positioning, the triangle can always be fixed on the side of the rectangle frame.

position:relative;

All code:

How to change the QQ chat box into a bubble
No! It should be said that it cannot be implemented for the time being! The question is absolutely no such thing as Shenma. I have searched for it many times. I have seen it in various QQ versions and other chat software.

Why is QQ chat a bubble?
Because of the update, you can view the text with colorful bubbles in the dialog box. If you want to cancel the text, click the box above to remove the hook.