微信聊天框以其简洁直观的界面和流畅的交互体验而广受欢迎。本文将展示如何利用HTML和CSS技术，在自己的网页上实现类似微信的聊天框效果。我们将一步步指导您完成，让网站或应用也能拥有专业且用户友好的聊天功能。
1.HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="twxt/css" href="code6_29.css"> </head> <body> <div class="box"> <div class="leftBox"> <img src="./1.png" width="40" height="40" /> <div class="left"> 你好啊 </div> </div> <div class="rightBox" style="justify-content: flex-end;"> <div class="right">你好~~</div> <img src="./2.png" width="40" height="40" /> </div> <div style="clear: both;"></div> </div> </body> </html>
2.css
.box { width: 300px; padding: 30px; ; margin: 100px auto; background-color: #f5f5f5; } .left, .right { width: 80px; height: 40px; border-radius: 5px; background-color: #95ec69; position: relative; margin: 10px 0; line-height: 40px; } .leftBox, .rightBox { display: flex; flex-direction: row; align-items: center; img { border-radius: 50%; } } .left { margin-left: 20px; padding-left: 5px; } .right { float: right; margin-right: 20px; padding-left: 5px; } .left::before { content: ""; width: 0; height: 0; position: absolute; /* 边框宽度为5px 颜色透明(也就是隐藏) */ border: 5px solid transparent; /* 箭头向左 则右边框显示 */ border-right-color: #95ec69; /* 在div左边展示 偏移量为 边框宽度*2 即5*2px */ left: -10px; /*垂直居中计算*/ /*如果有高度 则(父元素高度 - 子元素高度 )/2 */ /*如果是边框 则(父元素高度 - 边框宽度*2 )/2 */ /* (40-5*2)/2=15 */ top: 15px; } .right::before { content: ""; width: 0; height: 0; position: absolute; /* 边框宽度为5px 颜色透明(也就是隐藏) */ border: 5px solid transparent; /* 箭头向右 则左边框显示 */ border-left-color: #95ec69; /* 在div右边展示 偏移量为 边框宽度*2 即5*2px */ right: -10px; /*垂直居中计算*/ /*如果有高度 则(父元素高度 - 子元素高度 )/2 */ /*如果是边框 则(父元素高度 - 边框宽度*2 )/2 */ /* (40-5*2)/2=15 */ top: 15px; }
