Today, I made a QQ-like chat bubble using HTML/CSS. The following is the style settings in the key areas, and then I pasted 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:
Implement QQ chat bubble effect
