思路：聊天气泡组成主要有一个三角形+矩形文本框
对方的气泡
// 三角形 .triangle { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #ffffff;//其他位置边框设为透明，右侧显示就可以实现一个三角形 margin-top: 10px; } // 矩形 .rotationtiao { min-width: 10%; min-height: 30px; max-width: 90%; word-break: break-all; float: left; padding: 5px 10px; background-color: #ffffff; font-size: 14px; border-radius: 2px; display: flex; flex-wrap: wrap; align-items: center; position: relative; } // 最后只要用个容器将两个元素拼在一起就OK了我的气泡同理
// 三角形 .triangle-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #98e165; // 我的只需将左侧边框显示其他方向透明就可以了 margin-top: 10px; } // 矩形 .rotationtiao-right { min-width: 10%; min-height: 30px; max-width: 90%; word-break: break-all; padding: 5px 10px; background-color: #98e165; font-size: 14px; border-radius: 2px; display: flex; flex-wrap: wrap; align-items: center; } // 同理最后也是只要在外层使用一个容器将两个元素拼接即可
