思路:聊天气泡组成主要有一个三角形+矩形文本框
对方的气泡
// 三角形
.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;
}
// 同理最后也是只要在外层使用一个容器将两个元素拼接即可