2018-11-16 好用的聊天对话框

这次要做一个聊天天界面的样式，如图：

微信图片_20181116103800.png

在网上查了很多箭头对话框的这种例子，都是用定位做的并且还脱离文档流，箭头还会跟着对话的内容而变动，最后终于整出来了，废话不多说，上代码：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .info {
            position: relative;
            background: #F0F5FF;
            border-radius: 4px;
            color: #000;
            max-width:80%;
            display:flex;
            justify-content:flex-start;
            padding:10px;
            margin:13px 0 21px 0;
        }
        
        .nav {
            position: absolute;
            left: 30px;
            overflow: hidden;
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid dashed dashed dashed;
        }
        
        .nav-border {
            top: -20px;
            border-color: transparent transparent #F0F5FF transparent;
        }
        
        .nav-background {
            top: -19px;
            border-color: transparent transparent #F0F5FF transparent;
        }
        .box{border:1px solid red;padding:10px;width:600px;}
        
        
        .rightInfo{
            /*margin:50px 0;*/
            background: #0096FF;
            color:#fff;
            display:flex;
            justify-content:flex-end;
            
        }
        .rightNav-background{
            border-color: transparent transparent #0096FF transparent;
        }
        .rightNav-border {
            top: -20px;
            border-color: transparent transparent #0096FF transparent;
        }
        .leftBox{
            display:flex;justify-content:flex-start;
        }
        .rightBox{
            display:flex;justify-content:flex-end;
        }
        .rightnav{
            position: absolute;
            right: 10px;
            overflow: hidden;
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid dashed dashed dashed;   
        }
    </style>
</head>

<body>

    <div class='box'>
        <div class='leftBox'>
            <div class="info">
                  <span>您好，我是HelloWord！</span>
                  <div class="nav nav-border"></div>
                  <div class="nav nav-background"></div>
              </div>
        </div>
        <div class='rightBox'>
            <div class="info rightInfo">
                <span>今天天气太好了！</span>
                <div class=" rightnav nav-border rightNav-border"></div>
                <div class=" rightnav nav-background rightNav-background"></div>
           </div>
        </div>
        
    </div>

</body>

这个真的很好用，向我上述说的问题都没有出现！

最后编辑于：2018.11.16 12:21:54