Practice makes perfect

//给图片放入一个容器中 <div class="box"> <img calss="imgs" src=""> </div> // 父容器设置固定尺寸，图片设置自动高宽，最大高宽即可 .box{ width:400px; height:400px; .imgs{ width:auto; height:auto; max-width:100%; max-heig.

思路：聊天气泡组成主要有一个三角形+矩形文本框 对方的气泡 // 三角形 .triangle { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #ffffff;//其他位置边框设为透明，右侧显示就可以实现一个三角形 margin-top: 10