码迷,mamicode.com
首页 > Web开发 > 详细

气泡聊天CSS

时间:2020-04-16 19:19:43      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:聊天   isp   ack   radius   class   round   height   lin   服务   

<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>

 

气泡聊天CSS

标签:聊天   isp   ack   radius   class   round   height   lin   服务   

原文地址:https://www.cnblogs.com/firstcsharp/p/12714855.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!