思路:聊天氣泡組成主要有一個三角形+矩形文本框
對方的氣泡
// 三角形
.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;
}
// 同理最後也是隻要在外層使用一個容器將兩個元素拼接即可