气泡聊天CSS

<div class="divide"></div>
<div class="user-right"> 2020-01-06 11:12:40 wang</div>
<div class="chat-right">
    <span>wsw今天天气不错呦，一起去海边走走怎么样？？</span>
    <div class="arrow-right"></div>
</div>


<div class="divide"></div>
<div class="user-left"> 线上服务员 2020-01-06 11:12:40</div>
<div class="chat-left">
    <span>今天天气不错呦，一起去海边一起去海边一起去</span>
    <div class="arrow-left"></div>
</div>

<div class="divide"></div>
<div class="user-right"> 2020-01-06 11:12:40 James</div>
<div class="chat-right">
    <span>wsw今天天气不错呦，一起去海边走走怎天气不错呦，一起去海边走走怎天气不错呦，一起去海边走走怎天气不错呦，一起去海边走走怎天气不错呦，一起去海边走走怎么样？？</span>
    <div class="arrow-right"></div>
</div>

<div class="divide"></div>
<div class="user-right"> 2020-01-06 11:12:40 James.wang</div>
<div class="chat-right">
    <span>wsw今天天气不错呦，一起去海边走走怎么样？？</span>
    <div class="arrow-right"></div>
</div>

<style type="text/css">
    .chat-right { position: relative; height: auto; background-color: #f2f2f2; line-height: 26px; padding: 5px 10px; margin: 0px 80px 0 80px; border-radius: 8px; float: right; }
    .chat-left { position: relative; height: auto; background-color: #e6f2ff; line-height: 26px; padding: 5px 10px; margin: 2px 80px 0 80px; border-radius: 8px; float: left }
    .arrow-right { position: absolute; top: 5px; right: -18px; width: 0; height: 0; border: 10px solid; border-color: transparent; border-left-color: #f2f2f2 !important; display: inline-block; }
    .arrow-left { position: absolute; top: 5px; left: -18px; width: 0; height: 0; border: 10px solid; border-color: transparent; border-right-color: #e6f2ff !important; display: inline-block; }
    .user-right { padding-right: 88px; text-align: right; color: #999; }
    .user-left { padding-left: 88px; text-align: left; color: #999 }
    .divide { width: 100%; height: 1px; display: inline-block; }
</style>