Today, I used HTML/CSS to make a chat bubble similar to QQ. The following is the renderings:
Here are the style settings of key places. Then post HTML and CSS code (not much).
Step 1: LayoutThe message uses DIV+Float layout. Each message is wrapped in a DIV tag, and two div are used to wrap the user icon and user message content. On the left message, clear the floating first, and then set the float: left. In this way, the user icon and message content can be displayed in the same line. Among them, the user icon is on the left, and the message is close to the user icon.
On the right, the same first clear the floating. Then set Float: Right, so the user icon and message are displayed in the same line. The icon is on the far right. The left side of the icon is the message.
Step 2: Set the rounded rectangleborder-radius: 7px;Step 3: Triangular arrow
& n
Set the width and height of the DIV to 0, and set the border width to make it show a rectangle composed of four triangles. The color and size of each triangle can be set by setting the BORDER width and color.
The three triangular colors are set here to be transparent. Just leave a triangle to be 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 red;} Key point 4: Triangular tail followed rectangular boxUse relative positioning. It can always be fixed on the side of the rectangular box.
position: Relative;
All code:
<html> <head> <Style> / * Bubble style * / .sender {clear: both;} .sender div: nth-of-type (1) {float: left;} .sender div: nth-of-type (2) {Background-COLOR: Aquamarine; Float: Left; 0 20px 10px 15px; Padding: 10px 10px 10px 0px; Border-Radius: 7px;} .Receiver div: first-child image, .sender div: first- Child img {width: 50px; height: 50px;} .re organ {clear: both;} .receiver div: nth-child (1) {float: right;} .Receiver div: nth-type (2) {) Float : Right; Background-COLOR: GOLD; Margin: 0 10px 10px 20px; Padding: 10px 0px 10px 10px; Border-Radius: 7px;} .left_triangle {Height: 0px; Order-Width: 8px; Border-Style : solid; border-color: transparent aquaamarine transparent transparent; posity: related: -16px; top: 3px;} .right_triangle {height: 0px; wi dth: 0px; border-width: 8px; border-style: solid; border -Color: Transparent Transparent Transparent Gold; Position: Relative; Right: -16px; TOP: 3px;} </STYLE> </Head> <!-LEFT-> <Div class = Sen = Sen der> <div> <IMG SRC = ChatTemplateExample2_Files/Cat.jpg> </DIV> <DIV> <DIV Class = Left_triangle> </DIV> <span> Hello, Man! </Div> </Div> <! Right-> <div class = Receiver> <div> <IMG SRC = ChatTemplateExample2_Files/Cat.jpg> </DIV> <div Class = Right_triangle> </Div> <SPAN> Hello World D </span> < /div> </div> </body> </html>The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.