最终效果
实现原理
聊天气泡的尖角，通过css的边框绘制两个三角形实现，底部为绿色三角形，上方层叠一个小一点的白色三角形。
此范例为左聊天气泡，通过修改css参数，可以调整为右聊天气泡
完整范例代码
<view class="bubbleBox" wx:for="{{msgList}}"> <!-- 左侧的头像昵称 --> <view style="text-align: center;"> <t-avatar size='small' image="{{item.avatarUrl}}" /> <view style="padding-top: 10rpx;font-size: 24rpx;width: 100rpx;"> {{item.nickname}} </view> </view> <!-- 左侧的聊天气泡尖角 --> <view class="triangle-top-left"> <view class="triangle-top-left2"></view> </view> <!-- 聊天气泡 --> <view class="bkbubble-left"> <rich-text nodes="{{item.content}}" /> <view style="margin-top: 20rpx;" wx:for="{{item.imgList}}" wx:for-item="imgItem"> <image src="{{imgItem}}" mode="widthFix" /> </view> </view> </view>
.bubbleBox { display: flex; padding: 30rpx; } .triangle-top-left { position: relative; border-top: 15rpx solid #06A56F; border-left: 15rpx solid transparent; margin-top: 40rpx; margin-left: 10rpx; } .triangle-top-left2 { top: -12rpx; left: -4rpx; position: absolute; border-top: 15rpx solid #ffffff; border-left: 15rpx solid transparent; } .bkbubble-left { text-align: justify; width: 100%; padding: 16rpx; border-radius: 14rpx; border: 6rpx solid #06A56F; line-height: 46rpx; }
msgList: [ { nickname: '朝阳', avatarUrl: 'https://profile.csdnimg.cn/9/5/6/0_weixin_41192489', content: '连续参加了2次有趣青年的飞盘活动，发起人太阳的组织、引导和教学非常专业，热身运动也非常简单有趣，飞盘对战更加精彩激烈，节奏很快，心都快跳出来了，但大家一起得分的那一刻，胜利的狂喜将所有疲累和酸痛化为乌有，或许这就是体育团队竞技所独有的快乐和迷人的魅力。运动后，虽然大汗淋漓，但我和女朋友的气色都肉眼可见地变好了。最后，大家还会一起围绕预设话题交流思想，相互启发灵感，不仅帮我了解到更多朋友们的独特视角，也见识到许多优秀朋友们飞扬的文思、渊博的才学。<br><br>以后会多多参加有趣青年的活动，希望可以在坚持锻炼提升身体素质的同时，也收获思想的丰盈，结识更多优秀的伙伴，祝有趣青年越来越好，愿大家一起越来越牛！', imgList: ['https://profile.csdnimg.cn/9/5/6/0_weixin_41192489'] } ],
