CSS基础测试4 - Githubissues

zhangxinxu / quiz

小测答题收集区

536 stars 43 forks source link

CSS基础测试4 #16

Open zhangxinxu opened 5 years ago

zhangxinxu commented 5 years ago

完成下图所示的布局效果，只要兼容移动端即可：

得分要点： • 视觉还原（2分）； • 没有bug（2分）； • 代码友好（2分）； • 体验良好（2分）； • 有在线demo（2分）；

请附上对应的HTML代码和CSS代码，注意缩进和代码高亮，可以使用下面语法：

```html
你的代码在这里
```

```css
你的代码在这里
```

请提供在线的可访问的demo地址（精力有限，没有demo会减分哦），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。

提供几个头像地址：https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg

guisturdy commented 5 years ago

JS Bin预览

<div class="message friend">
  <div class="avator"><img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" />
  </div>
  <div class="info"><span class="user">提案笙</span><span class="date">9月30日21:47</span></div>
  <div class="msg">什么秘密，我觉得你现在跟我说什么都没有意义。</div>
</div>
<div class="message friend">
  <div class="avator"><img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" />
  </div>
  <div class="info"><span class="user">淮南王铃</span><span class="date">10月8日10:30</span></div>
  <div class="msg"><span class="at-user">@蝴蝶蓝</span>优秀</div>
</div>
<div class="message friend">
  <div class="avator"><img
      src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" /></div>
  <div class="info"><span class="user">蝴蝶蓝</span><span class="date">昨天22:13</span></div>
  <div class="msg">值得一听~~</div>
</div>
<div class="message self">
  <div class="avator"><img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" />
  </div>
  <div class="info"><span class="user">Y优秀X</span><span class="date">刚刚</span></div>
  <div class="msg">围观戏精现场</div>
</div>

body,
html {
    font-size: 15px;
    margin: 0;
    padding: 0;
    background: #fff;
}

.message {
    position: relative;
    min-height: 4rem;
    padding: .5rem 4rem;
}

.message .info {
    font-size: .8rem;
    color: rgb(163, 171, 184);
}

.message.friend .info .user {
    padding-right: .5rem;
}

.message.self .info .user {
    float: right;
    padding-left: .5rem;
}

.message .avator > img {
    height: 100%;
}

.message .avator {
    position: absolute;
    top: .5rem;
    overflow: hidden;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.message.friend .avator {
    left: .5rem;
}

.message.self .avator {
    right: .5rem;
}

.message.self {
    text-align: right;
}

.message .msg {
    line-height: 1.5;
    position: relative;
    display: inline-block;
    margin: .25rem 0;
    padding: .6rem 1rem;
    border-radius: .5rem;
}

.message.friend .msg {
    background-color: rgb(245, 247, 250);
}

.message.self .msg {
    color: #fff;
    background-color: rgb(82, 188, 250);
}

.message .msg::before {
    position: absolute;
    top: .02rem;
    display: block;
    width: 1.2rem;
    height: 1rem;
    content: '';
    border-radius: 50% 50% 0 0;
}

.message.friend .msg::before {
    left: -1.2rem;
    box-shadow: .5rem 0 0 0 rgb(245, 247, 250);
}

.message.self .msg::before {
    right: -1.2rem;
    box-shadow: -.5rem 0 0 0 rgb(82, 188, 250);
}

.message .msg .at-user {
    padding-right: .25rem;
}

WGHwebitem commented 5 years ago

<section>
        <div class="duihuak">
          <div class="left">
            <div class="imgcom touxL"><img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg"/></div>
            <div class="infcom infodivL">
                <div class="ft">淮南王玲&nbsp;10月8号&nbsp;10:30</div>
                <div class="comme speckL">hello world</div>
            </div>
          </div>
          <div class="left">
            <div class="imgcom touxL"><img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"/></div>
            <div class="infcom infodivL">
                <div class="ft">淮南王玲&nbsp;10月8号&nbsp;10:30</div>
                <div class="comme speckL">.</div>
            </div>
          </div>
          <div class="left">
            <div class="imgcom touxL"><img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"/></div>
            <div class="infcom infodivL">
                <div class="ft">淮南王玲&nbsp;10月8号&nbsp;10:30</div>
                <div class="comme speckL">.....</div>
            </div>
          </div>
          <!--右边部分-->
           <div class="right">
            <div class="imgcom touxR"><img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"/></div>
            <div class="infcom infodivR">
                <div class="ft">淮南王玲&nbsp;10月8号&nbsp;10:30</div>
                <div class="comme speckR">1233123</div>
            </div>
          </div>    
          <!--右边部分-->
           <div class="right">
            <div class="imgcom touxR"><img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"/></div>
            <div class="infcom infodivR">
                <div class="ft">XXX'x'</div>
                <div class="comme speckR">heihei嘿嘿</div>
            </div>
          </div>
         </div>
      </section>

*{width: 100%;font-family: "微软雅黑";}
            .duihuak{width:94%;margin-left:3%;list-style: none; margin-top: 1.5rem;}            
            .comme{
                padding: 8px;
                table-layout: fixed;
                word-break: break-all;/*在恰当的断字点进行换行*/
                background: #F2F5F9;
                border-radius: 5px;
                max-width: 80%;
                display: inline-block;
            }
            .left{clear: both;float: left;margin-left: 3px; margin-bottom: 25px;}
            .right{clear: both;float: right;margin-right: 3px;margin-bottom: 25px;}
            .imgcom{
                width: 60px; 
                height: 60px;
                border-radius: 100%;
                display: block;
                overflow: hidden;   
            }
            .imgcom img{display: block;width: 100%;height: auto;}
            .touxL{float: left;}
            .touxR{float: right;}
            .infcom{width:70%;position: relative;}
            .infodivL{float: left;margin-left: 4%;}
            .infodivR{float: right;text-align: right;margin-right: 4%;}
            .ft{font-size: 1rem;color:#5a6a7a;padding-bottom: .5rem;}
            .speckL:before{ 
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                left: -20px;
                top: 29px;
                border: 10px solid;
                border-color: transparent #F2F5F9 transparent transparent;
            }
            .speckR:after{ 
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                right: -18px;
                top: 29px;
                border: 10px solid;
                border-color: transparent transparent transparent #F2F5F9;
            }

maomao1996 commented 5 years ago

在线预览

    <div class="chat-container">
      <div class="chat-item chat-item__left">
        <img
          class="chat-head"
          src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg"
        />
        <div class="chat-body">
          <div class="chat-info"><a>提案笙</a> 9月30日 21:47</div>
          <div class="chat-content">
            什么秘密，我觉得你现在跟我说什么都没有意义
          </div>
        </div>
      </div>
      <div class="chat-item chat-item__left">
        <img
          class="chat-head"
          src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"
        />
        <div class="chat-body">
          <div class="chat-info"><a>淮南王玲</a> 10月8日 10:30</div>
          <div class="chat-content">@蝴蝶蓝 优秀</div>
        </div>
      </div>
      <div class="chat-item chat-item__left">
        <img
          class="chat-head"
          src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"
        />
        <div class="chat-body">
          <div class="chat-info"><a>蝴蝶蓝</a> 昨天 22:13</div>
          <div class="chat-content">值得一听~~</div>
        </div>
      </div>
      <div class="chat-item chat-item__right">
        <img
          class="chat-head"
          src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"
        />
        <div class="chat-body">
          <div class="chat-info">刚刚 <a>Y优秀X</a></div>
          <div class="chat-content">围观戏精现场</div>
        </div>
      </div>
    </div>

      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #fff;
      }
      .chat-container {
        width: 100%;
        padding-top: 15px;
        overflow: hidden;
      }
      .chat-item {
        width: 100%;
        overflow: hidden;
        margin-bottom: 15px;
      }
      .chat-item__right {
        text-align: right;
      }
      .chat-head {
        position: relative;
        z-index: 1;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin: 0 10px;
      }
      .chat-item__left .chat-head {
        float: left;
      }
      .chat-item__right .chat-head {
        float: right;
      }
      .chat-body {
        margin-left: 70px;
        margin-right: 70px;
      }
      .chat-info {
        margin-bottom: 5px;
        font-size: 14px;
        color: #a1abb9;
      }
      .chat-content {
        position: relative;
        display: inline-block;
        padding: 10px;
        border-radius: 7px;
        line-height: 20px;
        font-size: 16px;
        word-break: break-all;
      }
      .chat-content::before {
        content: '';
        position: absolute;
        top: 0;
        border-style: solid;
      }
      .chat-content::after {
        content: '';
        position: absolute;
        top: -1px;
        width: 25px;
        height: 25px;
        background-color: #fff;
      }
      .chat-item__left .chat-content {
        color: #444;
        background-color: #f5f7fa;
      }
      .chat-item__right .chat-content {
        color: #fff;
        background-color: #00beff;
      }
      .chat-item__left .chat-content::before {
        left: -15px;
        border-color: #f5f7fa #f5f7fa transparent transparent;
        border-width: 8px 8px 8px 10px;
        border-top-right-radius: 4px;
      }
      .chat-item__right .chat-content::before {
        right: -15px;
        border-color: #00beff transparent transparent #00beff;
        border-width: 8px 10px 8px 8px;
        border-top-left-radius: 4px;
      }
      .chat-item__left .chat-content::after {
        left: -25px;
        border-top-right-radius: 50%;
      }
      .chat-item__right .chat-content::after {
        right: -25px;
        border-top-left-radius: 50%;
      }

liyongleihf2006 commented 5 years ago

jsbin

<div class="card left">
    <div class="portrait-container">
        <img class="portrait" src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="" />
    </div>
    <div class="content">
        <div class="desc">
            提案声 9月30日 21:47
        </div>
        <div class="talk-container-wrap">
            <div class="talk-container">
                什么秘密，我觉得你现在跟我说什么都没有意义。
            </div>
        </div>
    </div>
</div>
<div class="card left">
    <div class="portrait-container">
        <img class="portrait" src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="" />
    </div>
    <div class="content">
        <div class="desc">
            淮南王玲 10月8日 10:30
        </div>
        <div class="talk-container-wrap">
            <div class="talk-container">
                @蝴蝶兰 优秀
            </div>
        </div>
    </div>
</div>
<div class="card left">
    <div class="portrait-container">
        <img class="portrait" src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="" />
    </div>
    <div class="content">
        <div class="desc">
            蝴蝶兰 昨天 22:13
        </div>
        <div class="talk-container-wrap">
            <div class="talk-container">
                值得一听～～
            </div>
        </div>
    </div>
</div>
<div class="card right">
    <div class="portrait-container">
        <img class="portrait" src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="" />
    </div>
    <div class="content">
        <div class="desc">
            刚刚 Y优秀X
        </div>
        <div class="talk-container-wrap">
            <div class="talk-container">
                围观戏精现场
            </div>
        </div>
    </div>
</div>

html{
    background:#fff;
}
.card {
    display: flex;
    margin: 32px 16px;
    font-size: 20px;
}

.portrait-container {
    height: 80px;
    width: 80px;
    border:1px solid #f5f7ff;
    border-radius: 50%;
    background-color: #f5f7ff;
    flex-shrink: 0;
}

.portrait {
    height: 100%;
    width: 100%;
    border-radius: inherit;
}

.desc {
    color: #a1abba;
    margin-bottom: 8px;
}

.talk-container-wrap {
    display: inline-block;
    position: relative;
}

.talk-container-wrap::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 200px;
    border-right-style: solid;
    border-right-width: 50px;
    border-radius: 0px 300px 0px 0px / 0px 72px 0px 0px;
    clip-path: polygon(0% 0%, 50px 0%, 50px 10px, 0% 10px);
    z-index: -1;
}

.talk-container {
    padding: 16px;
    border-radius: 16px;
}

.card.left .desc {
    padding-left: 16px;
}

.card.left .talk-container-wrap {
    padding-left: 16px;
}

.card.left .talk-container-wrap::before {
    left: 0px;
    border-color: #f5f7ff;
}

.card.left .talk-container-wrap .talk-container {
    padding-left: 16px;
    background-color: #f5f7ff;
    color: #3a3f48;
}

.card.right {
    flex-direction: row-reverse;
}

.card.right .desc {
    padding-right: 16px;
    text-align: right;
}

.card.right .talk-container-wrap {
    padding-right: 16px;
}

.card.right .talk-container-wrap::before {
    right: 0px;
    border-color: #40beff;
    transform: rotatey(180deg);
}

.card.right .talk-container-wrap .talk-container {
    padding-right: 16px;
    background-color: #40beff;
    color: #f9fdff;
}

XboxYan commented 5 years ago

demo

<ul class="msg-list">
    <li class="msg-item">
        <img class="msg-avator" alt="head" src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" >
        <div class="msg-info">
            <h3 class="msg-user">
                <span class="msg-name">提按生</span>
                <span class="msg-time">9月30日 21:47</span>
            </h3>
            <p class="msg-txt">什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密</p>
        </div>
    </li>
    <li class="msg-item">
        <img class="msg-avator" alt="head" src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" >
        <div class="msg-info">
            <h3 class="msg-user">
                <span class="msg-name">提按生</span>
                <span class="msg-time">9月30日 21:47</span>
            </h3>
            <p class="msg-txt">什么秘密</p>
        </div>
    </li>
    <li class="msg-item" data-self>
        <img class="msg-avator" alt="head" src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" >
        <div class="msg-info">
            <h3 class="msg-user">
                <span class="msg-name">提按生</span>
                <span class="msg-time">9月30日 21:47</span>
            </h3>
            <p class="msg-txt">什么秘密</p>
        </div>
    </li>
    <li class="msg-item" data-self>
        <img class="msg-avator" alt="head" src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" >
        <div class="msg-info">
            <h3 class="msg-user">
                <span class="msg-name">提按生</span>
                <span class="msg-time">9月30日 21:47</span>
            </h3>
            <p class="msg-txt">什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密什么秘密</p>
        </div>
    </li>
    <li class="msg-item">
        <img class="msg-avator" alt="head" src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" >
        <div class="msg-info">
            <h3 class="msg-user">
                <span class="msg-name">提按生</span>
                <span class="msg-time">9月30日 21:47</span>
            </h3>
            <p class="msg-txt">什么秘密</p>
        </div>
    </li>
</ul>

html,body{
    margin: 0;
    height: 100%;
}
.msg-list{
    height: 100%;
    overflow:auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
.msg-item{
    display: flex;
    padding: 7px;
    margin-bottom: 15px;
}
.msg-item::after{
    content: '';
    display: inline-block;
    width: 44px;
}
.msg-avator{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.msg-info{
    flex: 1;
    text-align: start;
    padding: 0 10px;
    overflow:hidden;
}
.msg-user{
    margin: 0;
    font-weight: normal;
    font-size: 13px;
    color: #949ead;
}
.msg-user span{
    display: inline-block;
}
.msg-time{
    padding: 0 8px;
}
.msg-txt{
    position: relative;
    display: inline-flex;
    background: #f2f5f9;
    border-color: #f2f5f9;
    font-size: 14px;
    line-height: 1.5;
    color: #2c3038;
    padding: .6em 1em;
    text-align: left;
    margin: 5px 0 0;
    border-radius: 6px;
}
.msg-txt::before{
    content: '';
    position: absolute;
    width: 1.4em;
    height: 1.2em;
    top: 0;
    margin-inline-start:-3em;
    -webkit-margin-start: -3em;/**qq浏览器有点兼容性问题，需要加上这个**/
    border-top-right-radius: 40% 50%;
    border-top-left-radius: 40% 50%;
    border-left: 0.6em solid;
    border-right: 0.6em solid;
    border-color: inherit;
}
/** data-self（message from myself） **/
.msg-item[data-self]{
    direction: rtl;/*改变css流向*/
}
.msg-item[data-self] .msg-txt{
    background: #00afff;
    border-color: #00afff;
    color: #fff;
}

Ericteen commented 5 years ago

codepen 预览聊天界面

  <div class="wrapper">
    <div class="chat-item">
      <div class="user-avatar">
        <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="avatar">
      </div>
      <div class="user-info-wrapper">
        <p class="user-info">
          <span class="ui-desc ui-name">提案笙</span>
          <span class="ui-desc ui-date">9月30日</span>
          <span class="ui-desc ui-time">21:47</span>
        </p>
        <div class="msg-wrapper msg-wrapper-color">
          什么秘密，我觉得你现在跟我说什么都没有意义
        </div>
      </div>
    </div>
    <div class="chat-item">
      <div class="user-avatar">
        <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="avatar">
      </div>
      <div class="user-info-wrapper">
        <p class="user-info">
          <span class="ui-desc ui-name">淮南王铃</span>
          <span class="ui-desc ui-date">10月8日</span>
          <span class="ui-desc ui-time">10:30</span>
        </p>
        <div class="msg-wrapper msg-wrapper-color">
          @蝴蝶蓝 优秀
        </div>
      </div>
    </div>
    <div class="chat-item">
      <div class="user-avatar">
        <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="avatar">
      </div>
      <div class="user-info-wrapper">
        <p class="user-info">
          <span class="ui-desc ui-name">蝴蝶蓝</span>
          <span class="ui-desc ui-date">昨天</span>
          <span class="ui-desc ui-time">22:13</span>
        </p>
        <div class="msg-wrapper msg-wrapper-color">
          什么秘密，我觉得你现在跟我说什么都没有意义
        </div>
      </div>
    </div>
    <div class="chat-item chat-item-reverse">
      <div class="user-avatar">
        <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="avatar">
      </div>
      <div class="user-info-wrapper">
        <p class="user-info user-info-reverse">
          <span class="ui-desc ui-desc-reverse ui-name">Y优秀X</span>
          <span class="ui-desc ui-desc-reverse ui-date">刚刚</span>
          <!-- <span class="ui-desc ui-time">22:13</span> -->
        </p>
        <div class="msg-wrapper msg-wrapper-color-reverse">
          围观戏精现场
        </div>
      </div>
    </div>
  </div>

html,
body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background-color: white;
  min-height: 100vh;
}
.wrapper .chat-item-reverse {
  flex-direction: row-reverse;
}
.wrapper .chat-item {
  display: flex;
  margin-bottom: 10px;
}
.wrapper .chat-item:last-child {
  margin-bottom: 0;
}
.wrapper .chat-item .user-avatar {
  flex: 0 0 60px;
  margin: 0 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.wrapper .chat-item .user-avatar img {
  width: 100%;
}
.wrapper .chat-item .user-info-wrapper .user-info-reverse {
  flex-direction: row-reverse;
}
.wrapper .chat-item .user-info-wrapper .user-info-reverse .ui-desc-reverse {
  margin-right: 0;
  margin-left: 4px;
}
.wrapper .chat-item .user-info-wrapper .user-info-reverse .ui-desc-reverse:last-child {
  margin: 0;
}
.wrapper .chat-item .user-info-wrapper .user-info {
  display: flex;
  margin: 6px 0 6px;
}
.wrapper .chat-item .user-info-wrapper .user-info .ui-desc {
  display: inline-block;
  margin-right: 4px;
  color: #A1ABB9;
  font-size: 14px;
  line-height: 1.6;
}
.wrapper .chat-item .user-info-wrapper .user-info .ui-desc:last-child {
  margin-right: 0;
}
.wrapper .chat-item .user-info-wrapper .msg-wrapper-color-reverse {
  position: relative;
  color: white;
  background-color: #00BEFF;
}
.wrapper .chat-item .user-info-wrapper .msg-wrapper-color-reverse::before {
  content: '';
  position: absolute;
  top: 0;
  right: -5px;
  width: 0;
  height: 0;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #00BEFF transparent transparent;
}
.wrapper .chat-item .user-info-wrapper .msg-wrapper-color {
  position: relative;
  color: #333;
  background-color: #F5F7FA;
}
.wrapper .chat-item .user-info-wrapper .msg-wrapper-color::after {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  width: 0;
  height: 0;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #F5F7FA transparent transparent;
}
.wrapper .chat-item .user-info-wrapper .msg-wrapper {
  box-sizing: border-box;
  padding: 10px;
  max-width: calc(80vw - 100px);
  font-size: 16px;
  line-height: 1.6;
  border-radius: 8px;
}

uaison commented 5 years ago

查看demo：copen.io在线链接

<ul class="chat">
  <li class="receive">
    <img class="avatar" src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="avatar">
    <div class="msg-info">
      <div class="info-title"><span>提案笙</span> <span>10月30日 22:47:00</span></div>
      <div class="info-content"><p>什么秘密,我觉得你现在跟我说什么都没有意义。</p></div>
    </div>
  </li>
  <li class="receive">
    <img class="avatar" src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="avatar">
    <div class="msg-info">
      <div class="info-title"><span>提淮南王铃</span> <span>10月8日 10:30</span></div>
      <div class="info-content"><p>@蝴蝶蓝 优秀</p></div>
    </div>
  </li>
  <li class="receive">
    <img class="avatar" src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="avatar">
    <div class="msg-info">
      <div class="info-title"><span>蝴蝶蓝</span> <span>昨天 22:13</span></div>
      <div class="info-content"><p>值得一听 ~ ~</p></div>
    </div>
  </li>
  <li class="send">
    <img class="avatar" src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="avatar">
    <div class="msg-info">
      <div class="info-title"><span>Y优秀X</span> <span>刚刚</span></div>
      <div class="info-content"><p>围观戏精现场</p></div>
    </div>
  </li>
</ul>

html {
  font-size: 62.5%;
  font-family: "Microsoft Yahei";
}

body {
  margin: 0;
  font-size: 1.4rem;
}

p {
  margin: 0;
}

.chat {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.chat li {
  display: flex;
  padding: 0.5em 4em 0.5em 1em;
}

.chat li.send {
  flex-direction: row-reverse;
  padding: 0.5em 1em 0.5em 4em;
  text-align: right;
}

.chat li .avatar {
  width: 3em;
  height: 3em;
  flex-shrink: 0;
  margin-right: 1em;
  border-radius: 50%;
  border: 1px solid #f5f7fa;
  -webkit-user-select: none;
  user-select: none;
}

.chat li.send .avatar {
  margin-right: 0;
  margin-left: 1em;
}

.chat li .info-title {
  margin: 0.5em 0;
  display: flex;
  color: #666;
  font-size: 0.8em;
}

.chat li.send .info-title {
  flex-direction: row-reverse;
}

.chat li .info-title span {
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #222;
}

.chat li .info-title span + span {
  margin: 0 0.5em;
}

.chat li .info-content {
  display: inline-block; /*处理内容长度不够，气泡长度过长*/
  position: relative;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  word-break: break-all;
  -webkit-filter: drop-shadow(0 0 1px #999); /* 加上阴影效果会好点 */
  filter: drop-shadow(0 0 1px #999);
}

.chat li.receive .info-content {
  border-top-left-radius: 0;
  background: #f5f7fa;
}

.chat li.send .info-content {
  border-top-right-radius: 0;
  background: #00beff;
  color: #fff;
}
.chat li .info-content p {
  text-align: left;
}

.chat li.receive .info-content::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #f5f7fa #f5f7fa transparent transparent;
  border-width: 0.3em;
  left: -0.4em;
  top: 0;
}

.chat li.send .info-content::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #00beff transparent transparent #00beff;
  border-width: 0.3em;
  right: -0.4em;
  top: 0;
}

wingmeng commented 5 years ago

在线Demo

<div class="chatbox">
  <article class="message">
    <div class="user-avatar">
      <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="提案笙">
    </div>
    <h4 class="message-heading">
      <span>提案笙</span><small>9月30日21:47</small>
    </h4>
    <div class="message-content">什么秘密，我觉得你现在跟我说什么都没有意义。</div>
  </article>
  <article class="message">
    <div class="user-avatar">
      <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="淮南王铃">
    </div>
    <h4 class="message-heading">
      <span>淮南王铃</span><small>10月8日10:30</small>
    </h4>
    <div class="message-content">@蝴蝶蓝 优秀</div>
  </article>
  <article class="message">
    <div class="user-avatar">
      <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="蝴蝶蓝">
    </div>
    <h4 class="message-heading">
      <span>蝴蝶蓝</span><small>昨天 22:13</small>
    </h4>
    <div class="message-content">值得一听~~</div>
  </article>
  <article class="message oneself">
    <div class="user-avatar">
      <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="Y优秀X">
    </div>
    <h4 class="message-heading">
      <span>Y优秀X</span><small>刚刚</small>
    </h4>
    <div class="message-content">围观戏精现场</div>
  </article>
</div>

html {font-size: 14px;}
body {
  padding: 0;
  margin: 0;            
}

h4 {font-weight: 500;}

.chatbox {
  padding-top: 2rem;
  background: #fff;
}

.message {
  position: relative;
  padding: 0 5.5rem;
  margin-bottom: 2rem;
  font-size: 1.125rem;
}

.user-avatar {
  position: absolute;
  width: 4rem;
  height: 4rem;
  left: calc((5.5rem - 4rem) / 2 - 5px);
  overflow: hidden;
  background: #e6e6e6;  /* 背景色兜底，防止头像“走光” */
  border-radius: 50%;
}

.user-avatar > img {
  display: block;
  max-width: 100%;
  margin: auto;
}

.message-heading {
  margin: 0;
  margin-bottom: .4rem;
  font-size: inherit;
  color: #ababab;
}

.message-heading > span {margin-right: .5em;}

.message-content {
  position: relative;
  display: inline-block;
  min-height: 1em;
  padding: .5em 1em;
  line-height: 1.6;
  background: #f2f4f7;
  border-radius: 10px;
  border-top-left-radius: 0;
}

.message-content::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: calc(5.5rem - 4rem);
  height: calc(5.5rem - 4rem);
  transform: translateX(-100%);

  /* 弧形箭头借鉴了 @guisturdy 的代码 */
  box-shadow: 0.5rem 0 0 #f2f4f7;
  border-radius: 50% 50% 0 0;
}

.message.oneself {direction: rtl;}

.oneself > .user-avatar {
  left: auto;
  right: calc((5.5rem - 4rem) / 2 - 5px);
}

.oneself > .message-heading > span {
  float: right;
  margin-right: 0;
  margin-left: .5em;
}

.oneself > .message-content {
  direction: ltr;
  color: #fff;
  background: #00bdfe;
  border-radius: 10px;
  border-top-right-radius: 0;
}

.oneself > .message-content::before {
  left: auto; right: 0;
  transform: translateX(1rem);
  box-shadow: inset .5rem 0 0 #00bdfe;
}

Despair-lj commented 5 years ago

测试 DEMO

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
  <title>issue 16</title>
</head>
<body>
  <section>
    <div class="message">
        <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="avatar" class="avatar">
        <div class="wrapper">
          <div class="user">
            <span class="name">提案笙</span>
            <span class="date">9月30日21:47</span>
          </div>
          <span class="triangle"></span>
          <p class="content">
            什么秘密，我觉得你现在跟我说什么都没有意义。
          </p>
        </div>
    </div>
    <div class="message">
        <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="avatar" class="avatar">
        <div class="wrapper">
          <div class="user">
            <span class="name">淮南王铃</span>
            <span class="date">10月8日10:30</span>
          </div>
          <span class="triangle"></span>
          <p class="content">
            @蝴蝶蓝优秀
          </p>
        </div>
    </div>
    <div class="message">
        <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="avatar" class="avatar">
        <div class="wrapper">
          <div class="user">
            <span class="name">蝴蝶蓝</span>
            <span class="date">昨天22:13</span>
          </div>
          <span class="triangle"></span>
          <p class="content">
            值得一听~~
          </p>
        </div>
    </div>
    <div class="message me">
        <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="avatar" class="avatar">
        <div class="wrapper">
          <div class="user">
            <span class="name">xxx</span>
            <span class="date">昨天22:13</span>
          </div>
          <p class="content">
            围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观围观
          </p>
          <span class="triangle"></span>
        </div>
    </div>
  </section>
</body>
</html>

:root {
  --backgroundColor: rgb(245, 247, 250);
  --myBackgroundColor: rgb(82, 188, 250);
  --userInfoColor: rgb(163, 171, 184);
}
html, body {
  margin: 0;
  padding: 0;
  background-color: white;
  min-width: 320px;
  font-family: sans-serif;
}
.message {
  padding: 10px;
}
.message img{
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 10px 0 0;
  border-radius: 50%;
}
.message.me img {
  float: right;
  margin: 0 0 0 10px;
}
.message .wrapper {
  margin: 0 60px 0 0;
  overflow: hidden;
  font-size: 0;
}
.message.me .wrapper {
  margin: 0 0 0 60px;
  text-align: right;
}
.message .user {
  margin: 0 0 5px 0;
  font-size: 12px;
  color: var(--userInfoColor);
}
.message.me .user {
  direction: rtl;
}
.message .name {
  display: inline-block;
}
.message .content {
  display: inline-block;
  margin: 0px;
  padding: 9px 15px;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  background-color: var(--backgroundColor) ;
}
.message.me .content {
  background-color: var(--myBackgroundColor);
  color: white;
}
.message .triangle {
  display: inline-block;
  position: absolute;
  margin: 0 0 0 -6px;
  border: 8px solid;
  border-color: var(--backgroundColor) var(--backgroundColor) transparent transparent;
}
.message.me .triangle {
  margin: 0 0 0 -8px;
  border-color: var(--myBackgroundColor) transparent transparent var(--myBackgroundColor);
}

Seasonley commented 5 years ago

在线demo

备用地址

<dl class="msg">
<img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg"/>
<dt>
<span>提案笙</span>
<span>9月30日 21:47</span>
</dt>
<dd>什么秘密，我觉得你现在跟我说什么都没有意义。</dd>
</dl>
<dl class="msg">
<img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"/>
<dt>
<span>淮南王铃</span>
<span>10月8日10:30</span>
</dt>
<dd>@蝴蝶蓝 优秀</dd>
</dl>
<dl class="msg">
<img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"/>
<dt>
<span>蝴蝶蓝</span>
<span>昨天22:13</span>
</dt>
<dd>值得一听~~</dd>
</dl>
<dl class="msg owner">
<img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"/>
<dt>
<span>Y优秀X</span>
<span>刚刚</span>
</dt>
<dd>围观戏精现场</dd>
</dl>

html{
    margin: 0;
    font-size: 3.5vw;
    color: rgb(161,171,185);
}
.msg{
    --rtt:rotate(72deg);
    --bkg: rgb(245,247,250);
    --text: black;
}
.msg.owner{
    --rtt:rotate(-72deg);
    --bkg:rgb(0,190,255);
    --text:white;
    direction: rtl;
}
.msg dt{
    margin:0 20vw;
}
.msg dt span:first-of-type{
    display: inline-block;
}
.msg img:first-of-type{
    position: absolute;
    width: 14vw;
    height: 14vw;
    border-radius: 50%;
    text-indent: 100vw;
    overflow: hidden;
    color:transparent;
    background: #DDD;
    margin: 0 2vw;
}
.msg dd:last-of-type{
    font-size: 1.1rem;
    line-height: 1.7;
    padding: 1.8vw 2.8vw;
    margin: 1vw 20vw;
    border-radius:3vw;
    max-width: 58vw;
    display: inline-block;
    background: var(--bkg);
    color: var(--text);
}
.msg dd:last-of-type::before{
    content: '';
    display: block;
    position: absolute;
    width: 6vw;
    height: 6vw;
    background: transparent;
    border-top: 3vw solid var(--bkg);
    border-radius: 50%;
    transform: var(--rtt);
    margin: -3.2vw -7vw;
}

bugaosunihhh commented 5 years ago

预览 https://jsbin.com/fakupukoke/1/edit?html,css,output

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
            name="viewport"
        />
        <title>CSS小测</title>
        <link rel="stylesheet" href="./style.css" />
    </head>

    <body>
        <section class="container">
            <seciton class="talk-wrap">
                <div class="talk-item">
                    <div class="avatar">
                        <img
                            src="https://tvax2.sinaimg.cn/crop.18.21.500.500.180/60718250ly1fe7kog3jroj20f00f03zj.jpg"
                        />
                    </div>
                    <div class="info-wrap">
                        <p class="info-tip">
                            <span class="info-name">名字啊</span>
                            <span class="info-time">3月1日 22:23:00</span>
                        </p>
                        <div class="info-content-wrap">
                            <div class="info-content">
                                内容内容内容内容内容内
                            </div>
                        </div>
                    </div>
                </div>

                <div class="talk-item">
                    <div class="avatar">
                        <img
                            src="https://tvax2.sinaimg.cn/crop.18.21.500.500.180/60718250ly1fe7kog3jroj20f00f03zj.jpg"
                        />
                    </div>
                    <div class="info-wrap">
                        <p class="info-tip">
                            <span class="info-name">名字啊</span>
                            <span class="info-time">3月1日 22:23:00</span>
                        </p>
                        <div class="info-content-wrap">
                            <div class="info-content">
                                内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容
                            </div>
                        </div>
                    </div>
                </div>

                <div class="talk-item talk-item-reverse">
                    <div class="avatar">
                        <img
                            src="https://tvax2.sinaimg.cn/crop.18.21.500.500.180/60718250ly1fe7kog3jroj20f00f03zj.jpg"
                        />
                    </div>
                    <div class="info-wrap">
                        <p class="info-tip">
                            <span class="info-name">名字啊</span>
                            <span class="info-time">3月1日 22:23:00</span>
                        </p>
                        <div class="info-content-wrap">
                            <div class="info-content">
                                内容容内容内容内容内容内容内容内容
                            </div>
                        </div>
                    </div>
                </div>

                <div class="talk-item">
                    <div class="avatar">
                        <img
                            src="https://tvax2.sinaimg.cn/crop.18.21.500.500.180/60718250ly1fe7kog3jroj20f00f03zj.jpg"
                        />
                    </div>
                    <div class="info-wrap">
                        <p class="info-tip">
                            <span class="info-name">名字啊</span>
                            <span class="info-time">3月1日 22:23:00</span>
                        </p>
                        <div class="info-content-wrap">
                            <div class="info-content">
                                内容容内容内容内容内容内容内容内容
                            </div>
                        </div>
                    </div>
                </div>

                <div class="talk-item talk-item-reverse">
                    <div class="avatar">
                        <img
                            src="https://tvax2.sinaimg.cn/crop.18.21.500.500.180/60718250ly1fe7kog3jroj20f00f03zj.jpg"
                        />
                    </div>
                    <div class="info-wrap">
                        <p class="info-tip">
                            <span class="info-name">名字啊</span>
                            <span class="info-time">3月1日 22:23:00</span>
                        </p>
                        <div class="info-content-wrap">
                            <div class="info-content">
                                内容容内容内容内容内容内容内容内容
                            </div>
                        </div>
                    </div>
                </div>
                <div class="talk-item talk-item-reverse">
                    <div class="avatar">
                        <img
                            src="https://tvax2.sinaimg.cn/crop.18.21.500.500.180/60718250ly1fe7kog3jroj20f00f03zj.jpg"
                        />
                    </div>
                    <div class="info-wrap">
                        <p class="info-tip">
                            <span class="info-name">名字啊</span>
                            <span class="info-time">3月1日 22:23:00</span>
                        </p>
                        <div class="info-content-wrap">
                            <div class="info-content">
                                内容容内容内hhhh容内容内容内容内容内容
                            </div>
                        </div>
                    </div>
                </div>
                <div class="talk-item talk-item-reverse">
                    <div class="avatar">
                        <img
                            src="https://tvax2.sinaimg.cn/crop.18.21.500.500.180/60718250ly1fe7kog3jroj20f00f03zj.jpg"
                        />
                    </div>
                    <div class="info-wrap">
                        <p class="info-tip">
                            <span class="info-name">名字啊</span>
                            <span class="info-time">3月1日 22:23:00</span>
                        </p>
                        <div class="info-content-wrap">
                            <div class="info-content">
                                内容内容内容
                            </div>
                        </div>
                    </div>
                </div>
            </seciton>
        </section>
    </body>
</html>

body,
html {
    height: 100%
}

body {
    margin: 0;
    overflow-x: hidden;
    background: #a7b1be
}

.container {
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    overflow-y: scroll
}

.talk-wrap {
    -webkit-overflow-scrolling: touch;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff
}

.talk-wrap .talk-item {
    display: flex;
    margin-bottom: 10px;
    padding: 20px
}

.talk-wrap .talk-item .avatar {
    margin-right: 20px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%
}

.talk-wrap .talk-item .avatar img {
    display: block;
    max-width: 100%
}

.talk-wrap .info-wrap {
    margin-right: 80px;
    flex: 1
}

.talk-wrap .info-wrap .info-tip {
    margin: 0 0 10px 0;
    color: #a7b1be;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.talk-wrap .info-wrap .info-tip .info-name {
    margin-right: 20px
}

.talk-wrap .info-wrap .info-content {
    position: relative;
    display: inline-block;
    padding: 20px;
    background: #f5f7fa;
    color: #3f434c;
    border-radius: 10px;
    line-height: 1.5;
    word-break: break-all
}

.talk-wrap .info-wrap .info-content::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 24px;
    top: 0;
    left: -20px;
    border-top-right-radius: 50%;
    box-shadow: 10px 0 0 0 #f5f7fa
}

.talk-wrap .talk-item-reverse {
    flex-direction: row-reverse
}

.talk-wrap .talk-item-reverse .avatar {
    margin-right: 0;
    margin-left: 20px
}

.talk-wrap .talk-item-reverse .info-wrap {
    margin-right: 0;
    margin-left: 80px
}

.talk-wrap .talk-item-reverse .info-wrap .info-tip {
    flex-direction: row-reverse
}

.talk-wrap .talk-item-reverse .info-wrap .info-tip .info-name {
    margin-right: 0;
    margin-left: 20px
}

.talk-wrap .talk-item-reverse .info-wrap .info-content-wrap {
    display: flex;
    justify-content: flex-end
}

.talk-wrap .talk-item-reverse .info-wrap .info-content {
    background-color: #00beff;
    color: #fff
}

.talk-wrap .talk-item-reverse .info-wrap .info-content:before {
    left: auto;
    right: -20px;
    border-top-right-radius: 0;
    border-top-left-radius: 50%;
    box-shadow: -10px 0 0 0 #00beff
}

3.31 补充上面的代码 info-content 嵌套在 info-warp-content 内，考虑使用自动margin减少这一层嵌套。

预览自动margin

<section class="container">
    <seciton class="talk-wrap">
        <div class="talk-item">
            <div class="avatar">
                <img src="https://tvax2.sinaimg.cn/crop.18.21.500.500.180/60718250ly1fe7kog3jroj20f00f03zj.jpg" />
            </div>
            <div class="info-wrap">
                <p class="info-tip">
                    <span class="info-name">名字啊</span>
                    <span class="info-time">3月1日 22:23:00</span>
                </p>
                <div class="info-content">内容内容内容内容内容内</div>
            </div>
        </div>
        <div class="talk-item talk-item-reverse">
            <div class="avatar">
                <img src="https://tvax2.sinaimg.cn/crop.18.21.500.500.180/60718250ly1fe7kog3jroj20f00f03zj.jpg" />
            </div>
            <div class="info-wrap">
                <p class="info-tip">
                    <span class="info-name">名字啊</span>
                    <span class="info-time">3月1日 22:23:00</span>
                </p>
                <div class="info-content">内容内容内容</div>
            </div>
        </div>
    </seciton>
</section>

body,
html {
    height: 100%
}

body {
    margin: 0;
    overflow-x: hidden;
    background: #a7b1be
}

.container {
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    overflow-y: scroll
}

.talk-wrap {
    -webkit-overflow-scrolling: touch;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff
}

.talk-wrap .talk-item {
    display: flex;
    margin-bottom: 10px;
    padding: 20px
}

.talk-wrap .talk-item .avatar {
    margin-right: 20px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%
}

.talk-wrap .talk-item .avatar img {
    display: block;
    max-width: 100%
}

.talk-wrap .info-wrap {
    margin-right: 80px;
    flex: 1;
    display: flex;
    flex-wrap: wrap;

}

.talk-wrap .info-wrap .info-tip {
    width: 100%;
    margin: 0 0 10px 0;
    color: #a7b1be;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.talk-wrap .info-wrap .info-tip .info-name {
    margin-right: 20px
}

.talk-wrap .info-wrap .info-content {
    position: relative;
    display: inline-block;
    padding: 20px;
    background: #f5f7fa;
    color: #3f434c;
    border-radius: 10px;
    line-height: 1.5;
    word-break: break-all
}

.talk-wrap .info-wrap .info-content::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 24px;
    top: 0;
    left: -20px;
    border-top-right-radius: 50%;
    box-shadow: 10px 0 0 0 #f5f7fa
}

.talk-wrap .talk-item-reverse {
    flex-direction: row-reverse
}

.talk-wrap .talk-item-reverse .avatar {
    margin-right: 0;
    margin-left: 20px
}

.talk-wrap .talk-item-reverse .info-wrap {
    margin-right: 0;
    margin-left: 80px
}

.talk-wrap .talk-item-reverse .info-wrap .info-tip {
    flex-direction: row-reverse;

}

.talk-wrap .talk-item-reverse .info-wrap .info-tip .info-name {
    margin-right: 0;
    margin-left: 20px
}

.talk-wrap .talk-item-reverse .info-wrap .info-content-wrap {
    display: flex;
    justify-content: flex-end
}

.talk-wrap .talk-item-reverse .info-wrap .info-content {
    margin-left: auto;
    background-color: #00beff;
    color: #fff
}

.talk-wrap .talk-item-reverse .info-wrap .info-content:before {
    left: auto;
    right: -20px;
    border-top-right-radius: 0;
    border-top-left-radius: 50%;
    box-shadow: -10px 0 0 0 #00beff
}

lineforone commented 5 years ago

<div id="msgWrapper">
    <div id="msgHolder">
      <div class="msg-box">
        <div class="img-box">
          <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg">
        </div>
        <div class="msg-agent">
          <div class="name"> 提案笙 <span class="date">9月30日 21:47</span> </div>
          <div class="bubble">
            <div class="text">
              什么秘密，我觉得你现在跟我说什么都没有意义。
            </div>
          </div>
        </div>
      </div>
      <div class="msg-box">
        <div class="img-box">
          <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg">
        </div>
        <div class="msg-agent">
          <div class="name"> 淮南王铃 <span class="date">10月8日 10:30</span> </div>
          <div class="bubble">
            <div class="text">
             @蝴蝶蓝 优秀
            </div>
          </div>
        </div>
      </div>
      <div class="msg-box">
        <div class="img-box">
          <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg">
        </div>
        <div class="msg-agent">
          <div class="name"> 蝴蝶蓝 <span class="date">昨天 22:13</span> </div>
          <div class="bubble">
            <div class="text">
              值得一听~~
            </div>
          </div>
        </div>
      </div>
      <div class="msg-box msg-box-forme">
        <div class="img-box">
          <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg">
        </div>        
        <div class="msg-agent">
          <div class="name"><span class="date">刚刚</span>  Y优秀X </div>
          <div class="bubble">
            <div class="text">
             围观戏精现场
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

 html{
      font-size: 100px;
    }
    html,body,div,p{
      margin: 0;
      padding: 0;
    }
    .msg-box{
      margin-top: 0.26rem;
      font-size:0;
    }
    .img-box{
      float: left;
      margin-left: 0.08rem;

    }
    .img-box img{
      width: 0.46rem;
      height: 0.46rem;
      border-radius: 50%;
      vertical-align: top;
    }
    .msg-agent{
      margin-left: 0.64rem;
    }
    .msg-agent .name{
      font-size: 14px;
      color: #909bab;
      margin-bottom: 0.05rem;
    }
    .msg-agent .bubble{
      font-size: 15px;
      background-color: #f2f5f9;
      border-radius: 5px;
      padding: 0.1rem 0.13rem;
      max-width: 80%;
      box-sizing: border-box;
      position: relative;
      text-align: justify;
      display: inline-block;
    }
    .msg-agent .bubble:before{
      content: '';
      position: absolute;
      top: 0;
      right: 100%;
      width: 0;
      height: 0;
      border-width: 0.03rem 0.03rem;
      border-color: #f2f5f9 #f2f5f9 #fff #fff;
      border-style: solid;
    }

    .msg-box-forme .img-box{
      float: right;
      margin-right: 0.08rem;
      margin-left: 0;
    }
    .msg-box-forme .msg-agent{
      margin-right: 0.64rem;
      margin-left: 0;
      text-align: right;
    }
    .msg-box-forme .msg-agent .bubble:before{
      left: 100%;
      border-color: #00beff #fff #fff #00beff;
    }
   .msg-box-forme .msg-agent .bubble{
      background-color: #00beff;
    }

在线demo

guqianfeng commented 5 years ago

在线预览

<div class="container">
    <div class="msg left">
        <div class="user-pic">
            <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="">
        </div>
        <div class="info">
            <span class="user">提案笙</span>
            <span class="date">9月30日21:47</span>
        </div>
        <div class="content">
            <span>什么秘密，我觉得你现在跟我说什么都没有意义。</span>
        </div>
    </div>
    <div class="msg left">
        <div class="user-pic">
            <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="">
        </div>
        <div class="info">
            <span class="user">淮南王铃</span>
            <span class="date">10月8日10:30</span>
        </div>
        <div class="content">
            <span>@蝴蝶蓝 优秀</span>
        </div>
    </div>
    <div class="msg left">
        <div class="user-pic">
            <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="">
        </div>
        <div class="info">
            <span class="user">蝴蝶蓝</span>
            <span class="date">昨天22:13</span>
        </div>
        <div class="content">
            <span>值得一听~~</span>
        </div>
    </div>
    <div class="msg right">
        <div class="user-pic">
            <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="">
        </div>
        <div class="info">
            <span class="user">Y优秀X</span>
            <span class="date">刚刚</span>
        </div>
        <div class="content">
            <span>围观戏精现场</span>
        </div>
    </div>
</div>

        *{
            padding: 0;
            margin: 0;
        }
        html{
            font-size: 1vw;
        }
        div.msg{
            position: relative;
            width: 80rem;
            height: 10rem;
            margin-bottom: 5rem;
        }
        div.left{
            float: left;
        }
        div.right{
            float: right;
        }
        div.msg > div.user-pic{
            position: absolute;
            width: 8rem;
            height: 8rem;
            border-radius: 50%;
        }
        div.msg > div.user-pic > img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        div.left > div.user-pic{
            left: 1rem;
        }
        div.right > div.user-pic{
            right: 1rem;
        }
        div.msg > div.info{
            position: absolute;
            color: #B0B8C4;
            top: 1rem;
        }
        div.left > div.info{
            left: 10rem;

        }
        div.right > div.info{
            right: 10rem;
        }
        div.msg > div.info > span + span{
            margin-left: 1rem;
        }
        div.msg > div.content{
            position: absolute;
            top: 2.8rem;
            padding: 1rem;
            border-radius: .8rem;
            max-width: 14rem;
        }
        div.left > div.content{
            left: 10rem;
            background-color: #f5f7fa;
            color: #444952;
        }
        div.right > div.content{
            right: 10rem;
            background-color: #00beff;
            color: #f7fdff;
        }
        div.left > div.content:after,div.right > div.content:after{
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            border-top: .5rem solid transparent;
            border-bottom: .5rem solid transparent;
            top: 1rem;
        }
        div.left > div.content:after{
            border-right: .5rem solid #f5f7fa;
            left: -0.5rem;
        }
        div.right > div.content:after{
            border-left: .5rem solid #00beff;
            right: -0.5rem;
        }

RichardDFang commented 5 years ago

在线预览

<div class="talk-box">
    <div class="msg">
        <div class="msg-avatar">
            <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="提案笙">
        </div>
        <div class="msg-detail">
            <div class="msg-head">
                <div class="msg-name">提案笙</div>
                <div class="msg-datetime">9月30号 21:47</div>
            </div>
            <div class="msg-body">什么秘密，我觉得现在跟你说什么都没意义</div>
        </div>
    </div>
    <div class="msg">
        <div class="msg-avatar">
            <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="淮南王铃">
        </div>
        <div class="msg-detail">
            <div class="msg-head">
                <div class="msg-name">淮南王铃</div>
                <div class="msg-datetime">10月8号 10:30</div>
            </div>
            <div class="msg-body">@蝴蝶蓝 优秀</div>
        </div>
    </div>
    <div class="msg">
        <div class="msg-avatar">
            <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="蝴蝶蓝">
        </div>
        <div class="msg-detail">
            <div class="msg-head">
                <div class="msg-name">蝴蝶蓝</div>
                <div class="msg-datetime">昨天 22:03</div>
            </div>
            <div class="msg-body">值得一听~~</div>
        </div>
    </div>
    <div class="msg self">
        <div class="msg-avatar">
            <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="">
        </div>
        <div class="msg-detail">
            <div class="msg-head">
                <div class="msg-name">Y优秀X</div>
                <div class="msg-datetime">刚刚</div>
            </div>
            <div class="msg-body">围观戏精现场</div>
        </div>
    </div>
</div>

html {
    font-size: 10px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.msg {
    display: flex;
    padding: .6rem 0;
}

.msg.self {
    flex-direction: row-reverse;
}

.msg-avatar {
    width: 3.2rem;
    height: 3.2rem;
    min-width: 3.2rem;
    border-radius: 50%;
    overflow: hidden;
    font-size: 0;
}

.msg-head {
    display: flex;
    padding-bottom: .5rem;
    color: #aab3bf;
}

.msg.self .msg-head {
    flex-direction: row-reverse;
}

.msg-detail {
    padding-left: .8rem;
}

.msg.self .msg-detail {
    padding-right: .8rem;
}

.msg-datetime {
    padding-left: .8rem;
    padding-right: .8rem;
}

.msg-body {
    position: relative;
    padding: 1rem;
    border-radius: .5rem;
    font-size: 1.4rem;
    white-space: pre-wrap;
    color: #3f444d;
    background: #f5f7fa;
}

.msg.self .msg-body {
    color: #fff;
    background: #00beff;
}

.msg-body::before {
    content: '';
    display: block;
    position: absolute;
    width: 1.6rem;
    height: .8rem;
    top: .1rem;
    left: -1.6rem;
    border-radius: 1.6rem 1.6rem 0 0;
    box-shadow: .6rem -.1rem 0 #f5f7fa;
}

.msg.self .msg-body::before {
    right: -1.6rem;
    left: auto;
    box-shadow: -.6rem -.1rem 0 #00beff;
}

les-lee commented 5 years ago

点击预览

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="record">
    <div class="img left" alt="找不到图片">
      <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="找不到图片">
    </div>
    <div class="left content left-content">
      <p>提案涩 9月30日 21:27</p>
      <p>什么秘密, 我觉得你现在跟我说什么都没有意义。</p>
    </div>
  </div>
  <div class="record">
    <div class="img left" alt="找不到图片">
      <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="找不到图片">
    </div>
    <div class="left content left-content">
      <p>提案涩 10月8日 21:27</p>
      <p><span class="@person">@蝴蝶蓝 </span>优秀。</p>
    </div>
  </div>
  <div class="record">
    <div class="img left" alt="找不到图片">
      <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="找不到图片">
    </div>
    <div class="left content left-content">
      <p>蝴蝶蓝 昨天 22:13</p>
      <p>值得一听~~</p>
    </div>
  </div>
  <div class="record">
    <div class="img right" alt="找不到图片">
      <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="找不到图片">
    </div>
    <div class="right content right-content">
      <p>刚刚 Y优秀X </p>
      <p>围观戏精现场</p>
    </div>
  </div>
</body>
</html>

css


p {
  margin: 0;
  padding: 0;
}
body {
  padding: 5px;
}
.record {
  clear: both;
  margin-top: 20px;
  overflow: hidden;
}
img:after {
  content: '';
  background: url(默认提示图片);
  position: absolute;
  display: block;
  width: 80px;
  height: 80px;
  z-index: 50;
  left: 0;
  top: 0;
}

img {
  max-width: 100%;
}
.img {
  position: relative;
  width:60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left {
  float: left;
}

.right {
  float: right;
}

.left-content {
  margin-left: 20px;
}

.right-content {
  margin-right: 20px;
}

.content p:nth-child(1) {
  color: gray;
}

.content p:nth-child(2){
  margin-top: 5px;
  background: #f5f7fa;
  padding: 10px;
  border-radius: 10px;
  position: relative;
  font-size: 18px;
  max-width: 200px;
  letter-spacing: 2px;
}

.content p:nth-child(2):before {
    position: absolute;
    top: 0;
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f5f7fa;
}

.content p:nth-child(2):after {
    background: white;
    top: 6px;
    content: '';
    width: 20px;
    height: 30px;
    position: absolute;
}

.left-content p:nth-child(2):before{
  right: calc(100% - 10px);
}

.left-content p:nth-child(2):after{
  right: 100%;
  border-top-right-radius: 50%;

}

.right-content p:nth-child(1) {
  text-align: right;
}

.right-content p:nth-child(2) {
  background: #00beff;
}

.right-content p:nth-child(2):before{
  left: calc(100% - 10px);
  background: #00beff;
}
.right-content p:nth-child(2):after{
  left: 100%;
  border-top-left-radius: 50%;
}

Fatty-Shu commented 5 years ago

地址如果背景不是纯色，小角会考虑使用图片或者SVG实现；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS基础测试4</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            background-color: #fff;
        }
        .dialogue-box{
            padding: 0 20px;
            width:100%;
            height: auto;
            overflow: auto;
            font:18px/24px 'Microsoft YaHei';
            color:#3a3f48;            
            box-sizing: border-box;
        }
        .dialogue-box li {
            position: relative;
            float: left;
            padding-left: 78px;
            margin: 15px 0;
            width: 90%;
            height: auto;
            overflow: hidden;
            box-sizing: border-box;
        }
        .avatar {
            position: relative;
            float: left;
            margin: 12px 0 0 -78px;
            width: 64px;
            height: 64px;
            border-radius:50%;
            outline: none; 
            z-index: 1;
        }
        .msg-nav{
            float: left;
            width: 100%;
            height: auto;
            overflow: visible;
        }
        .msg-nav>p{
            padding: 0;
            margin: 0;
            float: left;            
            box-sizing: border-box;
        }
        .msg-nav>p.msg-form,
        .msg-nav>p.msg-time {
            font:18px/40px 'Microsoft YaHei';
            white-space: nowrap;
            text-overflow: ellipsis;
            color:#a2acba;
            overflow: hidden;
        }
        .msg-nav>p.msg-time {
            width: 55%;
        }
        .msg-nav>p.msg-form{
            max-width: 45%;
        }
        .msg-nav>p.msg-form{
            padding-right: 10px;
        }
        .msg-nav>p.msg-content{
            position: relative; 
            padding: 10px;
            width: 100%;
            background-color: #f5f7fa;
            border-radius: 10px;
        }
        .msg-nav>p.msg-content::before,
        .msg-nav>p.msg-content::after{
            position: absolute;   
            top:0;     
            content: "";
            background-color: #f5f7fa;
        }
        .msg-nav>p.msg-content::before{       
            left: -56px;
            width: 64px;
            height: 64px;
            border-radius: 10px;
            clip: rect(0px,64px,16px,45px);
        }
        .msg-nav>p.msg-content::after{
            left: -26px;
            height: 32px;
            width: 32px;
            border-radius: 0 25px 0 0;
            clip: rect(0,26px,32px,0px);
            background-color: #fff;
        }
        .dialogue-box li.me {
            float: right;
            padding: 0 78px 0 0;
        }
        .dialogue-box li.me>.avatar{
            float: right;            
            margin: 12px -78px 0 0;
        }
        .dialogue-box li.me>.msg-nav{
            float: right;
        }
        .dialogue-box li.me>.msg-nav>p.msg-form,
        .dialogue-box li.me>.msg-nav>p.msg-time{
            float: right;
            text-align: right;
        }
        .dialogue-box li.me>.msg-nav>p.msg-content{
            background-color: #00beff;
        }
        .dialogue-box li.me>.msg-nav>p.msg-content::before{       
            left: unset;
            right: -56px;
            clip: rect(0px,19px,16px,0px);
            background-color: #00beff;
        }
        .dialogue-box li.me>.msg-nav>p.msg-content::after{
            left: unset;
            right: -26px;
            border-radius:25px 0 0 0;
            clip: rect(0,32px,32px,6px);
        }
    </style>
</head>
<body>
    <ul class="dialogue-box">
        <li>
            <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="提安笙" class="avatar">
            <div class="msg-nav">   
                <p class="msg-form">提安笙提安笙提安笙提安笙</p>
                <p class="msg-time">9月30日 21:47</p>
                <p class="msg-content">什么秘密，我觉得你现在跟我说什么都没有意义。</p>
            </div>
        </li>
        <li>
            <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="淮南王铃" class="avatar">
            <div class="msg-nav">   
                <p class="msg-form">淮南王铃</p>
                <p class="msg-time">10月8日 10:33</p>
                <p class="msg-content">@蝴蝶蓝 优秀</p>
            </div>
        </li>
        <li>
            <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="蝴蝶蓝 " class="avatar">
            <div class="msg-nav">   
                <p class="msg-form">蝴蝶蓝</p>
                <p class="msg-time">昨天 22:13</p>
                <p class="msg-content">值得听一听~~</p>
            </div>
        </li>
        <li class="me">
            <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="Y优秀X" class="avatar">
            <div class="msg-nav">   
                <p class="msg-form">Y优秀X</p>
                <p class="msg-time">刚刚</p>
                <p class="msg-content">围观戏精现场</p>
            </div>
        </li>
    </ul>
</body>
</html>

gxlself commented 5 years ago

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>聊天</title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
        <div id="app">
            <div class="chat" v-for="chat in chats">
                <div class="chat_other">
                    <img :src="chat.avator" v-if="!chat.isOwner">
                </div>
                <div class="chat_content">
                    <div :class="[chat.isOwner ? 'flex_right' : 'flex_left']">
                        <div class="user_info">
                            <span v-if="chat.isOwner">{{chat.date}}&nbsp;{{chat.userName}}</span>
                            <span v-if="!chat.isOwner">{{chat.userName}}&nbsp;{{chat.date}}</span>
                        </div>
                    </div>
                    <div :class="[chat.isOwner ? 'flex_right' : 'flex_left']">
                        <div class="user_content" :class="[{owner_back : chat.isOwner}, chat.isOwner ? 'content_right' : 'content_left']">
                            {{chat.content}}
                        </div>
                    </div>
                </div>
                <div class="chat_owner">
                    <img :src="chat.avator" v-if="chat.isOwner">
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                chats: [
                    {
                        "isOwner": false,
                        "content": "什么秘密,我觉得你现在跟我说什么都没有意义。",
                        "avator": "img/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg",
                        "date": "9月30日 21:47",
                        "userName": "提案笙"
                    },
                    {
                        "isOwner": false,
                        "content": "@蝴蝶兰 优秀",
                        "avator": "img/006LO43wly8frjay2sypvj30u00mita5.jpg",
                        "date": "10月8日 10:30",
                        "userName": "淮南王铃"
                    },
                    {
                        "isOwner": false,
                        "content": "值得一听~~",
                        "avator": "img/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg",
                        "date": "昨天 22:13",
                        "userName": "蝴蝶兰"
                    },
                    {
                        "isOwner": true,
                        "content": "围观戏精现场",
                        "avator": "img/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg",
                        "date": "刚刚",
                        "userName": "Y优秀X"
                    }
                ]
            }
        })
    </script>
</html>

html, body{
    height: 100%;
    box-sizing: border-box;
    background: #fff;
}
.chat{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 10px 0;
}

.chat_content{
    width: calc(100% - 110px - 1.5em);
}
.user_content{
    background: #f2f5f9;
    padding: 8px;
    margin-top: 4px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.chat_other, .chat_owner{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}
.chat_other img, .chat_owner img{
    width: 100%;
    height: 100%;
}
.user_info{
    color: #888;
}

.flex_left{
    display: flex;
    flex-direction: row;
}
.flex_right{
    display: flex;
    flex-direction: row-reverse;
}
.owner_back{
    background: #00afff;
    color: #FFF;
}
.content_left{
    border-top-right-radius: 5px;
}
.content_right{
    border-top-left-radius: 5px;
}
.content_right,.content_left{
    position: relative;
    border: 0;
    outline: 0;
}
.content_left::before{
    position: absolute;
    background: #f2f5f9;
    content: '';
    width: .5em;
    height: .5em;
    top: 0;
    left: -.5em;
}
.content_left::after{
    position: absolute;
    background: #fff;
    border-top-right-radius: 10px;
    content: '';
    width: .5em;
    height: .5em;
    top: 0;
    left: -.5em;
}
.content_right::before{
    position: absolute;
    background: #00afff;
    content: '';
    width: .5em;
    height: .5em;
    top: 0;
    right: -.5em;
}
.content_right::after{
    position: absolute;
    background: #fff;
    border-top-left-radius: 10px;
    content: '';
    width: .5em;
    height: .5em;
    top: 0;
    right: -.5em;
}

域名地址:http:gxlself.com/chat/index.html

JaimeCheng commented 5 years ago

demo预览气泡的小尾巴，参考了maomao1996

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天布局</title>
</head>
<body>
  <div class="msg-list">
    <div class="item others">
      <img class="avatar" src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="">
      <div class="info">
        <span class="nickname">提案笙</span>
        <span class="time">9月30日 21:47</span>
      </div>
      <div class="bubble">
        什么秘密，我觉得你现在跟我说什么都没有意义。
      </div>
    </div>
    <div class="item others">
      <img class="avatar" src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="">
      <div class="info">
        <span class="nickname">淮南王玲</span>
        <span class="time">10月8日 10:30</span>
      </div>
      <div class="bubble">
        @蝴蝶蓝 优秀
      </div>
    </div>
    <div class="item others">
      <img class="avatar" src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="">
      <div class="info">
        <span class="nickname">蝴蝶蓝</span>
        <span class="time">昨天 22:13</span>
      </div>
      <div class="bubble">
        值得一听~~
      </div>
    </div>
    <div class="item self">
        <img class="avatar" src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="">
        <div class="info">
          <span class="nickname">Y优秀X</span>
          <span class="time">刚刚</span>
        </div>
        <div class="bubble">
          围观戏精现场
        </div>
    </div>
  </div>
</body>
</html>

html, body {
  max-width: 540px;
  width: 100%;
  margin: auto;
}
.msg-list {
  overflow: hidden;
  padding: 15px;
  background: #fff;
}
.msg-list .item {
  overflow: hidden;
  margin-bottom: 25px;
}
.msg-list .item .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.msg-list .item.others .avatar,
.msg-list .item.others .nickname,
.msg-list .item.others .bubble{
  float: left;
  margin-right: 10px;
}
.msg-list .item.self .avatar,
.msg-list .item.self .nickname,
.msg-list .item.self .bubble{
  float: right;
  margin-left: 10px;
}
.msg-list .item .info {
  font-size: 14px;
  color: #A0A8B7;
  margin-bottom: 5px;
}
.msg-list .item.others .info {
  text-align: left;
}
.msg-list .item.self .info {
  text-align: right;
}
.msg-list .item .bubble {
  max-width: 65%;
  border-radius: 6px;
  padding: 10px;
  position: relative;
}
.msg-list .item.others .bubble {
  background: #F2F5F9;
  margin-left: 3px;
}
.msg-list .item.self .bubble {
  background: #00AFFF;
  color: #fff;
  margin-right: 3px;
}
.msg-list .item .bubble::before {
  content: '';
  position: absolute;
  top: 0;
  border-style: solid;
}
.msg-list .item .bubble::after {
  content: '';
  position: absolute;
  top: -1px;
  width: 25px;
  height: 25px;
  background-color: #fff;
}
.msg-list .item.others .bubble::before {
  left: -12px;
  border-color: #F2F5F9 #F2F5F9 transparent transparent;
  border-width: 8px 8px 8px 10px;
  border-top-right-radius: 4px;
}
.msg-list .item.others .bubble::after {
  left: -25px;
  border-top-right-radius: 50%;
}
.msg-list .item.self .bubble::before {
  right: -12px;
  border-color: #00AFFF transparent transparent #00AFFF;
  border-width: 8px 10px 8px 8px;
  border-top-left-radius: 4px;
}
.msg-list .item.self .bubble::after {
  right: -25px;
  border-top-left-radius: 50%;
}

y389278443z commented 5 years ago

在线预览

        html,body{font-size:14px;margin:0;}
        ul{padding:0;margin:0;list-style: none;}
        li{margin-bottom: 20px;}
        .clear:after{content: '';display: block;clear:both;}
        .img100{width:100%;height:100%;border-radius: 50%;}
        .msg-list{padding:0 5%; border:1px solid #eee;max-width:750px;min-width:375px;margin: 0 auto;box-sizing: border-box;}
        .left-img{width: 20%;float:left;}
        .right .left-img{float:right;}
        .right-info{width:55%;padding:0 5%;float:left;}
        .right .right-info{float:right;text-align: right;color:#fff;}
        .right-info>p{margin:0 0 2px; color:#999;}
        .right-info span{padding-right:5px;}
        .msg-box{border-radius: 10px;background:#ddd;padding: 5%;position:relative;word-break: break-all;max-width:100%;display: inline-block;text-align: left;}
        .msg-box:after{content: ''; border:5px solid transparent;border-right: 10px solid #ddd;position:absolute; left:-15px;top:10px;}
        .right .msg-box{background:#8cc5ff;}
        .right .msg-box:after{border-right:none;border-left:10px solid #8cc5ff;left:100%;}

<ul class="msg-list">
    <li class="clear">
        <div class="left-img">
            <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="" class="img100">
        </div>
        <div class="right-info">
            <p><span>法发发</span><span>9月20日</span><span>21:40</span></p>
            <div class="msg-box">
                什么秘密，我觉得你现在和我说什么都没意思
            </div>
        </div>
    </li>
    <li class="clear">
        <div class="left-img">
            <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="" class="img100">
        </div>
        <div class="right-info">
            <p><span>法发发</span><span>9月20日</span><span>21:40</span></p>
            <div class="msg-box">
                什么秘密，我觉得你现在和我说什么都没意思
            </div>
        </div>
    </li>
    <li class="right clear">
        <div class="left-img">
            <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="" class="img100">
        </div>
        <div class="right-info">
            <p><span>刚刚</span><span>x优秀y</span></p>
            <div class="msg-box">
                围观戏精现场
            </div>
        </div>
    </li>
</ul>

ylfeng250 commented 5 years ago

demo 地址 https://jsbin.com/tiruzin/2/edit?html,css,output

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>聊天窗口</title>
</head>

<body>
  <div class="chat-box">
    <div class="other message-item">
      <img class="user-head" src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"
        alt="大头">
      <div class="message-info">
        <div class="message-head">
          <span class="user-name">大头</span>
          <time class="pub-time" datetime="2019-03-28-17:27" pubdate>3月28日 17:27</time>
        </div>
        <div class="message-body">
          这是一段消息~~~~ hello world! 貌似文本不够长，再来一点
        </div>
      </div>
    </div>
    <div class="self message-item">
      <img class="user-head" src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"
        alt="Niko">
      <div class="message-info">
        <div class="message-head">
          <span class="user-name">Niko</span>
          <time class="pub-time" datetime="2019-03-28-17:27" pubdate>3月28日 17:27</time>
        </div>
        <div class="message-body">
          这是一段消息~~~~ hello world!
        </div>
      </div>
    </div>
    <div class="self message-item">
      <img class="user-head" src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"
        alt="爆C">
      <div class="message-info">
        <div class="message-head">
          <span class="user-name">爆C</span>
          <time class="pub-time" datetime="2019-03-28-17:27" pubdate>3月28日 17:27</time>
        </div>
        <div class="message-body">
          这是一段消息~~~~ hello world!
        </div>
      </div>
    </div>
    <div class="other message-item">
      <img class="user-head" src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"
        alt="难得糊涂">
      <div class="message-info">
        <div class="message-head">
          <span class="user-name">难得糊涂</span>
          <time class="pub-time" datetime="2019-03-28-17:27" pubdate>3月28日 17:27</time>
        </div>
        <div class="message-body">
          这是一段消息~~~~ hello world!
        </div>
      </div>
    </div>
  </div>
</body>

</html>

 html {
      /*100px 1rem = 100px 0.1rem = 10px*/
      font-size: 625% !important;
    }

    .chat-box {
      font-size: 0.16rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    .other {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
    }

    .self {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-start;
    }

    .message-item .user-head {
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 50%;
    }

    .other .message-info {
      margin: 0.04rem 0.6rem 0.04rem 0.1rem;
    }

    .self .message-info {
      margin: 0.04rem 0.1rem 0.04rem 0.6rem;
    }

    .message-head {
      display: flex;
      flex-direction: row;
      color: rgb(169, 178, 191);
      margin: 0.1rem;
    }

    .self .message-head {
      flex-direction: row-reverse;
    }

    .user-name {
      margin: 0 0.05rem;
    }

    .message-body {
      position: relative;
      word-break: break-all;
      font-size: 0.18rem;
      margin: 0.1rem;
      padding: 0.06rem 0.08rem;
      border-radius: 0.1rem;
    }

    .other .message-body {
      background: rgb(245, 247, 250);
    }

    .other .message-body::before {
      position: absolute;
      left: -0.18rem;
      top: -0.01rem;
      content: '';
      /* background: red; */
      width: 0.18rem;
      height: 0.12rem;
      border-top-right-radius: 60% 50%;
      border-right: 0.08rem solid;
      border-color: rgb(245, 247, 250);
    }

    .self .message-body {
      color: #fff;
      background: rgb(0, 190, 255);
    }

    .self .message-body::after {
      position: absolute;
      right: -0.18rem;
      top: -0.01rem;
      content: '';
      /* background: red; */
      width: 0.18rem;
      height: 0.12rem;
      border-top-left-radius: 60% 50%;
      border-left: 0.08rem solid;
      border-color: rgb(0, 190, 255);
    }

silverWolf818 commented 5 years ago

在线预览

有一个小问题ios10Safari浏览器，滚动还是存在页面缩放，没有找到好的解决方案，目前只简单的双击和两指去掉了缩放，请张老师指点。

<style>
        body{
            margin: 0
        }
        html {
            font-size: 16px;
        }
        @media screen and (min-width: 375px) {
            html {
                /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
                font-size: calc(100% + 2 * (100vw - 375px) / 39);
                font-size: calc(16px + 2 * (100vw - 375px) / 39);
            }
        }
        @media screen and (min-width: 414px) {
            html {
                /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
                font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
                font-size: calc(18px + 4 * (100vw - 414px) / 586);
            }
        }
        @media screen and (min-width: 600px) {
            html {
                /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
                font-size: calc(125% + 4 * (100vw - 600px) / 400);
                font-size: calc(20px + 4 * (100vw - 600px) / 400);
            }
        }
        @media screen and (min-width: 1000px) {
            html {
                /* 1000px往后是每100像素0.5px增加 */
                font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
                font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
            }
        }
        body {
            font-family: sans-serif;
            line-height: 1.5;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-text-size-adjust: none;
            -webkit-touch-callout: none
        }
        img{
            display: inline-block;
        }
        .content{
            padding: 0 .5rem;
        }
        .receive,.send{
            padding: .75rem 0;
            display: flex;
        }
        .send{
            flex-direction:row-reverse;
        }
        .avatar{
            width: 3rem;
        }
        .receive .avatar{
            margin-right: .8rem;
        }
        .send .avatar{
            margin-left: .8rem;
        }
        .avatar img{
            width: 100%;
            border-radius: 50%;
        }
        .info{
            font-size: .875rem;
            max-width: calc(100% - 7.6rem);
        }
        .head{
            color: #909bab;
            font-size: .875rem;
            line-height: 1;
        }
        .send .head{
            direction: rtl;
            text-align: right;
        }
        .head span{
            display: inline-block;
        }
        .receive .user{
            margin-right: .5rem;
        }
        .send .user{
            margin-left: .5rem;
        }
        .text{
            padding: .5rem 1rem;
            margin-top: .5rem;
            border-radius: .5rem;
            position: relative;
            text-align: justify;
            word-break: break-all;
        }
        .receive .text{
            background: #f2f5f9;
        }
        .send .text{
            color: #fff;
            background: #00afff;
        }
        .receive .text::before,
        .send .text::before{
            content: '';
            position: absolute;
            top: 0;
            width: 1.2rem;
            height: 1rem;
        }
        .receive .text::before{
            left: -1.2rem;
            border-radius:0 50%;
            box-shadow: 0.5rem 0 0 0 #f2f5f9;
        }
        .send .text::before{
            right: -1.2rem;
            border-radius:50% 0;
            box-shadow: 0.5rem 0 0 0 #00afff;
            transform: rotate(185deg);
        }
    </style>

<div class="content">
    <div class="receive">
        <div class="avatar"><img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg"  alt="pic"/></div>
        <div class="info">
            <div class="head"><span class="user">提案笙</span><span class="time">9月30日21:47</span></div>
            <div class="text">什么秘密，我觉得你现在跟我说什么都没有意义。</div>
        </div>
    </div>
    <div class="receive">
        <div class="avatar"><img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"  alt="pic"/></div>
        <div class="info">
            <div class="head"><span class="user">淮南王铃</span><span class="time">10月8日10:30</span></div>
            <div class="text">@蝴蝶蓝 优秀</div>
        </div>
    </div>
    <div class="receive">
        <div class="avatar"><img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"  alt="pic"/></div>
        <div class="info">
            <div class="head"><span class="user">蝴蝶蓝</span><span class="time">昨天22:13</span></div>
            <div class="text">值得一听~~</div>
        </div>
    </div>
    <div class="send">
        <div class="avatar"><img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="pic"></div>
        <div class="info">
            <div class="head"><span class="user">Y优秀X</span><span class="time">刚刚</span></div>
            <div class="text">围观戏精现场</div>
        </div>
    </div>
</div>

<script>
  document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  }, false);

  var lastTouchEnd = 0;
  document.documentElement.addEventListener('touchend', function (event) {
    var now = Date.now();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false);
  document.addEventListener('gesturestart', function (event) {
    event.preventDefault();
  });
</script>

sghweb commented 5 years ago

demo

  <div class="message">
    <div class="message__img">
      <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt=""/>
    </div>
    <div class="message__con">
      <div class="message__info">
        <span>提案笙</span><span class="message__date">9月30日</span><span>21:47</span>
      </div>
      <div class="message__des">
        什么秘密，我觉得你现在跟我说什么都没有意义。
      </div>
    </div>
  </div>
  <div class="message">
    <div class="message__img">
      <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt=""/>
    </div>
    <div class="message__con">
      <div class="message__info">
        <span>淮南王铃</span><span class="message__date">10月8日</span><span>10:30</span>
      </div>
      <div class="message__des">
        <span>@蝴蝶蓝</span>优秀
      </div>
    </div>
  </div>
  <div class="message">
    <div class="message__img">
      <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt=""/>
    </div>
    <div class="message__con">
      <div class="message__info">
        <span>蝴蝶蓝</span><span class="message__date">昨天</span><span>22:13</span>
      </div>
      <div class="message__des">
        值得一听~~
      </div>
    </div>
  </div>
  <div class="message match">
    <div class="message__img">
      <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt=""/>
    </div>
    <div class="message__con">
      <div class="message__info">
        <span>Y优秀X</span><span class="message__date">刚刚</span>
      </div>
      <div class="message__des">
        围观戏精现场
      </div>
    </div>
  </div>

html {
  /* 375为基准16px */
  font-size: calc(~"100% + 16 * (100vw - 375px) / 375");
  font-size: calc(~"16px + 16 * (100vw - 375px) / 375");
}
@r:16*750/375rem;
body{
 background: #fff;
}
.message{
  display: flex;
  padding:0 15/@r;
  margin-top: 45/@r;
  &__img{
    width:90/@r;
    height:90/@r;
    border-radius:50%;
    overflow: hidden;
    margin-right: 20/@r;
    img{
      width:90/@r;
      height:90/@r;
    }
  }
  &__con{
    display:flex;
    flex-direction: column;
  }
  &__info{
    display:flex;
    align-items: center;
    font-size:24/@r;
    color:#97a1b1;
  }
  &__date{
    margin:0 10/@r 0 18/@r;
  }
  &__des{
    position: relative;
    margin-top: 10/@r;
    font-size:26/@r;
    color:#2c3038;
    padding:15/@r 24/@r;
    line-height: 1.5;
    max-width: 470/@r;
    border-radius:15/@r;
    background: #f2f5f9;
    span{
      margin-right: 10/@r;
    }
    &::before{
      content: "";
      position:absolute;
      top: 0;
      left:-10/@r;
      width:0;
      height:0;
      border-right:20/@r solid transparent;
      border-left:20/@r solid transparent;
      border-top:20/@r solid #f2f5f9;
    }
  }
  &.match{
    flex-direction: row-reverse;
    .message{
      &__img{
        margin-right: 0;
        margin-left: 20/@r;
      }
      &__info{
        flex-direction: row-reverse;
      }
      &__date{
        margin:0 18/@r 0 10/@r;
      }
      &__des{
        color:#fff;
        background: #00afff;
        &::before{
          display: none;
        }
        &::after{
          content: "";
          position:absolute;
          top: 0;
          right:-10/@r;
          width:0;
          height:0;
          border-right:20/@r solid transparent;
          border-left:20/@r solid transparent;
          border-top:20/@r solid #00afff;
        }
      }
    }
  }
}

jsweber commented 5 years ago

在线演示

    <ul class="wrapper clearfix">
        <li class="other message">
            <div class="avatar"><img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" class="avatar-img"></div>
            <div class="content">
                <div class="msg-info">
                    <span class="classname">提案笙</span>
                    <span class="publish-time">9月30日 21:47</span>
                </div>
                <p class="msg-text">什么秘密，我觉得你现在跟我说什么都没有意义</p>
            </div>
        </li>
        <li class="other message">
                <div class="avatar"><img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" class="avatar-img"></div>
                <div class="content">
                    <div class="msg-info">
                        <span class="classname">淮南王铃</span>
                        <span class="publish-time">10月8日10:30</span>
                    </div>
                    <p class="msg-text"><span class="at-user">@蝴蝶蓝</span>优秀</p>
                </div>
            </li>
            <li class="other message">
                    <div class="avatar"><img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" class="avatar-img"></div>
                    <div class="content">
                        <div class="msg-info">
                            <span class="classname">蝴蝶蓝</span>
                            <span class="publish-time">昨天22:13</span>
                        </div>
                        <p class="msg-text">值得一听~~</p>
                    </div>
                </li>
        <li class="self message">
            <div class="avatar"><img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" class="avatar-img"></div>
            <div class="content">
                <div class="msg-info">
                    <span class="publish-time">刚刚</span>
                    <span class="classname">Y优秀X</span>
                </div>
                <p class="msg-text">围观戏精现场</p>
            </div>
        </li>
    </ul>

    ul,li,div,span{
        margin:0;
        padding:0;
    }
    .clearfix{}
    .clearfix::after{
        content: '';
        display: block;
        clear: both;
    }
    li{
        list-style-type: none;
    }
    p{
        margin:0;
    }
    .message{
        line-height: 16px;
        font-size: 15px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items:flex-start;
        margin-bottom: 15px;
    }

    .self{
        flex-direction: row-reverse;
    }

    .avatar{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 22px;
        overflow: hidden;
    }

    .avatar-img{
        width: 100%;
        flex: 1 0 0;
    }

    .content{
        display: inline-block;
        max-width: 60%;
    }

    .other .content{
        padding-left: 15px;
    }

    .self .content{
        padding-right: 15px;
    }

    .msg-info{
        font-size: 14px;
        line-height: 14px;
        color: rgb(163, 171, 184);
        padding-bottom: 6px;
    }

    .self .msg-info{
        text-align: right;
    }

    .classname{
        display: inline-block;
        max-width: 60px;
        text-overflow: ellipsis;
        white-space:nowrap;
        overflow: hidden;
    }

    .msg-text{
        position: relative;
        padding: 12px;
        border-radius: 8px;
       text-align: justify;
       color: #333;
    }

    .at-user{
        padding-right: 4px;
    }

    .self .msg-text{
        background-color: #00beff;
        color: #fff;
    }

    .other .msg-text{
        background-color: #f5f7fa;
    }

    .msg-text::before{
        content: '';
        position: absolute;
        top: 0;
        border-style: solid;
    }

    .msg-text::after{
        content: '';
        width: 18px;
        height: 18px;
        border-radius: 50%;
        position: absolute;
        background: #fff;
        top: -1px;
    }

    .other .msg-text::before{
        left: -12px;
        border-color: #f5f7fa #f5f7fa transparent transparent;
        border-width: 10px 10px 10px 14px;
        border-top-right-radius: 14px;
    }

    .other .msg-text::after{
        left: -18px;
    }
    .self .msg-text::before{
        right: -12px;
        border-color:  #00beff transparent transparent #00beff;
        border-width: 10px 14px 10px 10px;
        border-top-left-radius: 14px;
    }

    .self .msg-text::after{
        right: -18px;
    }

mengxiaoixao commented 5 years ago

在线演示

<ul>
<li class='common-list'>
  <img src='https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg' title='你好'/>
  <div>
    <p><span>作者 </span><span>时间</span></p>
    <p>
      你好我是内容，我司内容你好我是内容，我司内容你好我是内容，我司内容你好我是内容，我司内容你好我是内容，我司内容你好我是内容，我司内容你好我是内容，我司内容你好我是内容，我司内容
    </p>
  </div>
</li>
  <li class='common-list align-right'>
  <img src='https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg' title='你好'/>
  <div>
    <p><span>作者 </span><span>时间</span></p>
    <p>
      你好我是内容，我司内容
    </p>
  </div>
</li>
</ul>

ul{
  padding:0;
  font-size:14px;
  li.common-list{
    display:flex;
    margin-bottom:10px;
    img{
      width:60px;
      height:60px;
      border-radius:50%;
      flex:0 0 auto;
    }
    div{
      margin-left:20px;
      max-width:80%;
    }
    div p:first-child{
      color:#999;
    }
    div p:nth-child(2){
      border-radius:10px;
      background:#efefef;
      padding:1rem;
      position:relative;
      &:before{
        content: "";
        position: absolute;
        border: 0 solid transparent;
        border-bottom: 8px solid #efefef;
        border-radius: 0 0 0 30px;
        top: -10px;
        left: -5px;
        width: 12px;
        height: 12px;
        transform: rotate(25deg);
      }
    }
    &.align-right{
      flex-direction: row-reverse;
      div{
        margin-left:0;
        margin-right:1rem;
      }
      div p:nth-child(2){
        color: #fff;
        background-color: rgb(82, 188, 250);
        &:before{
          display:none;
        }
        &:after{
        content: "";
        position: absolute;
        border: 0 solid transparent;
        border-bottom: 8px solid rgb(82, 188, 250);
        border-radius: 0 0 0 30px;
        top: -3px;
        right: -8px;
        width: 12px;
        height: 12px;
        transform: rotate(145deg);
        }
      }
    }
  }
}
p{
  margin:0;
  line-height:1.5
}

thewindsword commented 5 years ago

预览地址

<div class="chat_list">
    <div class="chat_box_left">
        <div class="user_avatar">
            <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="avatar" />
        </div>
        <div class="user_content_box">
            <div class="user_info">
                <span class="user_info_name">提案笙</span>
                <span class="user_info_date">9月30日 21:47</span>
            </div>
            <div class="user_content">
                什么秘密，我觉得你现在跟我说什么都没有意义。
            </div>
        </div>
    </div>

    <div class="chat_box_left">
        <div class="user_avatar">
            <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"
                alt="avatar" />
        </div>
        <div class="user_content_box">
            <div class="user_info">
                <span class="user_info_name">淮南王铃</span>
                <span class="user_info_date">10月8日 10:30</span>
            </div>
            <div class="user_content">
                @蝴蝶蓝 优秀
            </div>
        </div>
    </div>
    <div class="chat_box_left">
        <div class="user_avatar">
            <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"
                alt="avatar" />
        </div>
        <div class="user_content_box">
            <div class="user_info">
                <span class="user_info_name">蝴蝶蓝</span>
                <span class="user_info_date">昨天</span>
            </div>
            <div class="user_content">
                值得一听~~
            </div>
        </div>
    </div>

    <div class="chat_box_right">
        <div class="user_avatar">
            <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="avatar" />
        </div>
        <div class="user_content_box">
            <div class="user_info">
                <span class="user_info_name">Y优秀X</span>
                <span class="user_info_date">刚刚</span>
            </div>
            <div class="user_content">
                围观戏精现场
            </div>
        </div>
    </div>
</div>

body {
  background: white;
  margin: 0;
  padding: 0;
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.chat_list {
  width: 100%;
  min-width: 320px;
  overflow: hidden;
}

[class^="chat_box"] {
  overflow: hidden;
  padding: 8px;
}

[class^="chat_box"] .user_avatar {
  background-color: white;
  width: 48px;
  height: 48px;
  border-radius: 48px;
  float: left;
  overflow: hidden;
}

[class^="chat_box"] .user_content_box {
  margin: 0 8px;
  float: left;
  max-width: 50%;
}

.user_avatar > img {
  width: 100%;
  height: 100%;
}

.user_content_box .user_info {
  color: #aab3bf;
  overflow: hidden;
}

.user_content_box .user_content {
  display: inline-block;
  position: relative;
  margin-top: 8px;
  border-radius: 8px;
  padding: 16px;
  background-color: #f5f7fa;
}

.user_info .user_info_name {
  float: left;
  margin-right: 0.5em;
}

.user_info .user_info_date {
  float: left;
}

.chat_box_right .user_avatar {
  float: right;
}

.chat_box_right .user_info .user_info_date {
  float: right;
}

.chat_box_right .user_info .user_info_name {
  float: right;
  margin-left: 0.5em;
  margin-right: 0;
}

.chat_box_right .user_content_box {
  float: right;
  text-align: right;
}

.chat_box_right .user_content_box .user_content{
  background-color: #00beff;
  color: white;
}

.user_content:after {
  position: absolute;
  display: inline-block;
  content: " ";
  width: 0.5em;
  height: 0.5em;
}

.chat_box_left .user_content:after {
  top: -0.1em;
  left: -0.5em;
  border-right: 0.75em solid #f5f7fa;
  border-top-right-radius: 1.25em 0.5em;
}

.chat_box_right .user_content:after {
  top: -0.1em;
  right: -0.5em;
  border-left: 0.75em solid #00beff;
  border-top-left-radius: 1.25em 0.5em;
}

ZWkang commented 5 years ago

在线预览地址 sanbox css基础测试4

      html,
      body {
        margin: 0 auto;
        padding: 0;
        max-width: 95vw;
        width: 95vw;
        font-size: 16px;
      }
      div,
      span,
      ul,
      li {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .message-container {
        border-radius: 0.625rem;
        background: #f5f7fa;
        padding: 0.9375rem;
        position: relative;
        color: #444;
        font-size: 1rem;
        line-height: 1.5;
        max-width: 65vw;
        word-break: break-all;
      }
      .self-talk .message-container {
        background: #00beff;
        color: #fff;
      }
      .message-container::before {
        width: 1.875rem;
        height: 1.25rem;
        position: absolute;
        display: block;
        content: "";
        top: 0;
      }
      .other-talk .message-container::before {
        background: #f5f7fa;
        border-radius: 0rem 0.625rem 0 0;
        left: -1.25rem;
      }
      .self-talk .message-container::before {
        border-radius: 0.626rem 0 0 0;
        right: -1.25rem;
        background: #00beff;
      }
      .message-container::after {
        width: 1.25rem;
        background: white;
        height: 1.25rem;
        content: "";
        display: block;
        position: absolute;
        top: 0;
      }
      .other-talk .message-container::after {
        border-radius: 0 1.25rem 0 0;
        left: -1.25rem;
      }
      .self-talk .message-container::after {
        right: -1.25rem;
        border-radius: 1.25rem 0 0 0;
      }
      .app-container figure {
        width: 3rem;
        height: 3rem;
        padding-right: 1.25rem;
        margin: 0;
      }
      .app-container figure > img {
        width: 100%;
        height: 100%;
        border-radius: 999rem;
      }
      .app-container ul {
        padding-left: 0;
      }
      .app-container li {
        list-style: none;
        display: flex;
        padding-top: 1.25rem;
      }
      .app-container li:first-child {
        padding-top: 0.3125rem;
      }

      .message-content {
        margin: 0;
        text-align: left;
      }
      .user-message span {
        color: #ccc;
        font-size: 16px;
      }
      .other-talk {
        flex-direction: row;
      }
      .self-talk {
        flex-direction: row-reverse;
        text-align: right;
      }
      .self-talk figure {
        padding-right: 0;
        padding-left: 1.25rem;
      }

  <body>
    <main class="app">
      <div class="app-container">
        <ul>
          <li class="other-talk">
            <figure>
              <img
                src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"
              />
            </figure>
            <div class="user-message">
              <span>提案笙</span> <span>9月30日</span> <span>21:47</span>
              <div class="message-container">
                <!-- <span class="cirtal-right"> -->
                <p class="message-content">
                  什么秘密，我觉得你现在跟我说什么都没有意义。
                </p>
              </div>
            </div>
          </li>
          <li class="other-talk">
            <figure>
              <img
                src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"
              />
            </figure>
            <div class="user-message">
              <span>淮南王玲</span> <span>&nbsp;10月8号</span>
              <span>&nbsp;10:30</span>
              <div class="message-container">
                <!-- <span class="cirtal-right"> -->
                <p class="message-content">@杜月笙</p>
              </div>
            </div>
          </li>
          <li class="other-talk">
            <figure>
              <img
                src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"
              />
            </figure>
            <div class="user-message">
              <span>2018年10月20日</span>
              <div class="message-container">
                <!-- <span class="cirtal-right"> -->
                <p class="message-content">
                  什么秘密，我觉得你现在跟我说什么都没有意义。
                </p>
              </div>
            </div>
          </li>
          <li class="other-talk">
            <figure>
              <img
                src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"
              />
            </figure>
            <div class="user-message">
              <span>2018年10月20日</span>
              <div class="message-container">
                <!-- <span class="cirtal-right"> -->
                <p class="message-content">
                  什么秘密，我觉得你现在跟我说什么都没有意义。
                </p>
              </div>
            </div>
          </li>
          <li class="self-talk">
            <figure>
              <img
                src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"
              />
            </figure>
            <div class="user-message">
              <span>淮南王玲</span> <span>&nbsp;10月8号</span>
              <div class="message-container">
                <p class="message-content">
                  什么秘密，我觉得你现在跟我说什么都没有意义。
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </main>
  </body>

z-xl-t commented 5 years ago

预览地址： jsbin

<div class="container">
    <div class="other">
      <div class="avator"><img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg"></div>
      <div class="content">
        <div class="info">
          <div class="item name">提案笙</div>
          <div class="item date">9月30日 21:47</div>
        </div>
        <div class="msg-wrapper">
          <div class="message">
            什么秘密, 我都觉得你现在跟我说什么意义都没有
          </div>
         </div>
      </div>
    </div>
    <div class="other">
      <div class="avator"><img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"></div>
      <div class="content">
        <div class="info">
          <div class="item name">淮南王玲</div>
          <div class="item date">10月8日 10:30</div>
        </div>
        <div class="msg-wrapper">
          <div class="message">
           @蝴蝶蓝 优秀
          </div>
         </div>
      </div>
    </div>
    <div class="other">
      <div class="avator"><img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"></div>
      <div class="content">
        <div class="info">
          <div class="item name">蝴蝶蓝</div>
          <div class="item date">昨天 22:13</div>
        </div>
        <div class="msg-wrapper">
          <div class="message">
            值得一听~~
          </div>
         </div>
      </div>
    </div>
    <div class="me">
      <div class="avator"><img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"></div>
      <div class="content">
        <div class="info">
          <div class="item name">Y优秀X</div>
          <div class="item date">刚刚</div>
        </div>
         <div class="msg-wrapper">
          <div class="message">
            戏精围观现场
          </div>
         </div>
      </div>
    </div>
  </div>


html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.container {
  padding: 0 .1rem;
  background: #fff;
  overflow: hidden;
}
.other, .me {
  display: flex;
  margin: .9rem 0;
}
.avator {
  width: 4rem;
  height: 4rem;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.avator > img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.content {
  flex: 1;
  margin-left: .6rem;
}
.info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: .4rem;
  color: #e3e5e9;
}
.info .item {
  margin-right: .2rem;
}
.message {
  display: inline-block;
  max-width: 60%;
  padding: .6rem;
  background: #f5f7fa;
  border-radius: .2rem;
}
.me .avator{
  order: 2;
}
.me .content {
   margin-left: 0;
   margin-right: .6rem;
}
.me .info {
  display: block;
}
.me .info::after {
  content: '';
  display: block;
  clear: both;
}
.me .info .item,
.me .msg-wrapper .message {
  float: right;
}

yuehaocc commented 5 years ago

预览地址：https://jsbin.com/domituh/edit?html,css,output

<div class="chatroom">
      <div class="item item-left">
        <div class="item-avatar" style="background-image: url(https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg)"></div>
        <div class="item-body">
          <div class="item-body-title">
            <span class="name">
              提案笙
            </span>&nbsp;
            <span class="time">
              9月39日 21:47
            </span>
          </div>
          <div class="item-body-content">
            什么秘密，我觉得你现在跟我说什么都没有意义
          </div>
        </div>
      </div>
      <div class="item item-left">
        <div class="item-avatar" style="background-image: url(https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg)"></div>
        <div class="item-body">
          <div class="item-body-title">
            <span class="name">
              淮南王玲
            </span>&nbsp;
            <span class="time">
              10月8日 10:30
            </span>
          </div>
          <div class="item-body-content">
            @蝴蝶兰 优秀
          </div>
        </div>
      </div>
      <div class="item item-left">
        <div class="item-avatar" style="background-image: url(https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg)"></div>
        <div class="item-body">
          <div class="item-body-title">
            <span class="name">
              蝴蝶兰
            </span>&nbsp;
            <span class="time">
              昨天 22:13
            </span>
          </div>
          <div class="item-body-content">
            值得一听~~
          </div>
        </div>
      </div>
      <div class="item item-right">
        <div class="item-avatar" style="background-image: url(https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg)"></div>
        <div class="item-body">
          <div class="item-body-title">
            <span class="time">
              刚刚
            </span>&nbsp;
            <span class="name">
              Y优秀X
            </span>
          </div>
          <div class="item-body-content">
            围观戏精现场
          </div>
        </div>
      </div>
    </div>

.chatroom {
  padding-top: 18px;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
}
.chatroom .item {
  margin-bottom: 24px;
  overflow: hidden;
}
.chatroom .item .item-avatar {
  float: left;
  margin: 0 10px 0 7px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: red;
  background-size: 100%;
}
.chatroom .item .item-body {
  float: left;
}
.item-body-title {
  margin-bottom: 6px;
  color: #909bab;
}
.item-body-title .name {

}
.item-body-content {
  padding: 8px 12px;
  max-width: 236px;
  background-color: #f2f5f9;
  color: #2c3038;
  border-radius: 6px;
  line-height: 1.6em;
}
.chatroom .item-right .item-avatar,
.chatroom .item-right .item-body {
  float: right;
}
.chatroom .item-right .item-body-content {
  background-color: #00afff;
  color: #fff;
}

CandyQiu commented 5 years ago

在线demo地址

修改后链接

HTML

<div class="container">
  <div class="friends">
    <div class="img">
      <img src="//tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="头像">
    </div>
    <div class="talk-area">
      <div class="talk-time">
        <span class="text">提案笙</span>
        <span class="text">9月30日</span>
        <span class="text">21:47</span>
      </div>
      <div class="talk-content">
        <div class="arrow-place">
          <div class="arrow"></div>
        </div>
        <div>什么秘密，我觉得你现在跟我说什么都没有意义。</div>
      </div>      
    </div>
  </div>

  <div class="friends">
    <div class="img">
      <img src="//tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="头像">
    </div>
    <div class="talk-area">
      <div class="talk-time">
        <span class="text">淮南王铃</span>
        <span class="text">10月8日</span>
        <span class="text">10:30</span>
      </div>
      <div class="talk-content">
        <div class="arrow-place">
          <div class="arrow"></div>
        </div>
        <div> <span class="text">@蝴蝶蓝</span>优秀</div>
      </div>      
    </div>
  </div>

  <div class="friends">
    <div class="img">
      <img src="//tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="头像">
    </div>
    <div class="talk-area">
      <div class="talk-time">
        <span class="text">蝴蝶蓝</span>
        <span class="text">昨天</span>
        <span class="text">22:13</span>
      </div>
      <div class="talk-content">
        <div class="arrow-place">
          <div class="arrow"></div>
        </div>
        <div>值得一听~~</div>
      </div>      
    </div>
  </div>

  <div class="self">
    <div class="talk-area">
      <div class="talk-time">
        <span class="text">刚刚</span>
        <span class="text">Y优秀X</span>
      </div>
      <div class="talk-content">
        <div class="arrow-place">
          <div class="arrow"></div>
        </div>
        <div>围观戏精现场</div>
      </div>      
    </div>
    <div class="img">
      <img src="//tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="头像">
    </div>
  </div>

  </div>
</div>

CSS

body,
html {
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: #fff;
}

.container{
  padding: 1rem;
  width: 25rem;
}

.friends,
.self {
  display:flex;
  padding-bottom:1.5rem;
}
.img img{
  border-radius: 50%;
  width: 4.5rem;
}
.talk-area{
    padding-left: 0.8rem;
}

.talk-time{
  color: #a0acbb;
}
.text{
  padding-right: 0.3rem;
}

.talk-content{
  margin-top: 0.3rem;
  background-color: #f5f7fa;
  max-width: 14.4rem;
  padding: 0.8rem;
  border-radius: 0.5rem;
  line-height:1.5;
  display: inline-block;
}

.arrow-place{
  position: absolute;
}
.arrow {
  height: 0;
  width: 0;
  position: relative;
  left: -1.2rem;
  top: -0.8rem;
  border-width:1rem 1rem 0;
  border-color: #f5f7fa transparent transparent;
  border-style: solid;
}

.self{
  float: right;
}

.self .talk-content{
  background-color:#58beff;
  color: #FFF;
  position: relative;
}

.self .arrow{
   border-color: #58beff transparent transparent;
   left: 1.2rem;
}

.self .arrow-place{
   right: 0.6rem;
   top: 0.8rem;
}

.self .talk-area{
  padding-right: 0.8rem;
  text-align: right;
}

.self .talk-area .talk-time{
  padding-right: 0.8rem;
  text-align: right;
}

smileyby commented 5 years ago

在线DEMO

小三角，没什么思路，照着第一个写，结果还写不出那个样子，好气啊。

<div class="container">
    <ul class="messageBox">
        <li class="left">
            <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="">
            <div class="content">
                <p class="messageInfo">
                    <span>提案笙</span>
                    <span>9月30日</span>
                    <span>21:47</span>
                </p>
                <p class="messageContent">什么秘密，我觉得你现在跟我说什么都没有意义</p>
            </div>
        </li>
        <li class="left">
            <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="">
            <div class="content">
                <p class="messageInfo">
                    <span>淮南王玲</span>
                    <span>10月8日</span>
                    <span>10:30</span>
                </p>
                <p class="messageContent">@蝴蝶蓝 优秀</p>
            </div>
        </li>
        <li class="left">
            <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="">
            <div class="content">
                <p class="messageInfo">
                    <span>蝴蝶蓝</span>
                    <span>昨天</span>
                    <span>22:12</span>
                </p>
                <p class="messageContent">值得一听~~</p>
            </div>
        </li>
        <li class="right">
            <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="">
            <div class="content">
                <p class="messageInfo">
                    <span>Y优秀X</span>
                    <span>刚刚</span>
                </p>
                <p class="messageContent">围观戏精现场</p>
            </div>
        </li>
    </ul>
</div>

html, body, ul, li, p {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

li {
    list-style: none;
}

.container {
    padding: 1.04167vh;
    background: #fff;
}

.messageBox li {
    position: relative;
    margin-bottom: 3.2vh;
}

.messageBox li:last-child {
    margin-bottom: 0;
}

.messageBox li.left {
    padding-left: 7.5vh;
}

.messageBox li.right {
    padding-right: 7.5vh;
}

.messageBox li img {
    width: 6.25vh;
    height: 6.25vh;
    border-radius: 50%;
    position: absolute;
    top: 0;
}

.messageBox li.left img {
    left: 0;
}

.messageBox li.right img {
    right: 0;
}

.messageInfo {
    font-size: 1.2rem;
    color: #a1abb9;
    margin-bottom: 0.4vh;
}

.messageInfo span {
    margin-right: 1vh;
}

.right {
    text-align: right;
}

.right .messageInfo::before {
    content: " "; 
    display: inline-block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.right .messageInfo span {
    display: inline-block;
    float: right;
}

.messageContent {
    position: relative;
    display: inline-block;
    max-width: 31.33333vh;
    padding: 1.73333vh;
    border-radius: 0.8vh;
    font-size: 1.4rem;
    line-height: 2.66666vh;
    word-break: break-all;
}

.messageContent::before {
    content: '';
    position: absolute;
    top: 0.13333vh;
    display: block;
    width: 1.2vh;
    height: 1vh;
    border-radius: 50% 50% 0 0;
}

.left .messageContent::before {
    left: -1.2vh;
    box-shadow: .5vh 0 0 0 rgb(245, 247, 250);
}

.right .messageContent::before {
    right: -1.2vh;
    box-shadow: -.5vh 0 0 0 rgb(82, 188, 250);
}

.left .messageContent {
    color: #000;
    background-color: #f5f7fa;
}

.right .messageContent {
    display: inline-block;
    color: #fff;
    background-color: #00beff;
}

MissHoya commented 5 years ago

codepen预览

html

<div class="dialog">
  <div class="message">
    <div class="message-avator">
      <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="">
    </div>
    <div class="message-main">
      <div class="header">
        <span class="name">提案笙</span>
        <span class="date">9月30日</span>
        <span class="time">21:47</span>
      </div>
      <div class="content">
        什么秘密，我觉得你现在跟我说什么都没有意义。
      </div>
    </div>
  </div>
  <div class="message">
    <div class="message-avator">
      <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="">
    </div>
    <div class="message-main">
      <div class="header">
        <span class="name">淮南王玲</span>
        <span class="date">10月8日</span>
        <span class="time">10:30</span>
      </div>
      <div class="content">
        什么秘密，我觉得你现在跟我说什么都没有意义。
      </div>
    </div>
  </div>
  <div class="message">
    <div class="message-avator">
      <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="">
    </div>
    <div class="message-main">
      <div class="header">
        <span class="name">蝴蝶蓝</span>
        <span class="date">昨天</span>
        <span class="time">22:43</span>
      </div>
      <div class="content">
        值得一听~~
      </div>
    </div>
  </div>
  <div class="message self">
    <div class="message-avator">
      <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="">
    </div>
    <div class="message-main">
      <div class="header">
        <span class="name">Y优秀X</span>
        <span class="date-time">刚刚</span>
      </div>
      <div class="content">
        围观戏精现场
      </div>
    </div>
  </div>
</div>

css

.dialog {
  padding: 14px;
}

.message {
  margin-top: 40px;
  display: flex;
}
.message-avator img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.message-main {
  margin: 0 20px;
}
.message-main .header {
  line-height: 1.2;
  color: #909bab;
}
.message-main .header span + span {
  margin-left: 0.5em;
}
.message-main .content {
  display: inline-block;
  padding: 0.6em 0.8em;
  margin-top: 12px;
  line-height: 1.5;
  background-color: #f2f5f9;
  border-radius: 0.5em;
  position: relative;
}
.message-main .content:before {
  content: '';
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #f2f5f9 transparent transparent transparent;
  position: absolute;
  top: 0;
  left: -10px;
}
.message:after {
  content: '';
  display: block;
  width: 50px;
}
.message.self {
  flex-direction: row-reverse;
}
.message.self .message-main .content:before {
  right: -10px;
  left: auto;
}
.message.self .message-main .header span {
  float: right;
}
.message.self .message-main .header span + span {
  margin-left: 0;
  margin-right: 0.5em;
}

NeilChen4698 commented 5 years ago

Demo https://codepen.io/crazyboy/pen/bJbgWy 1553882419

HTML

<ul>
    <li>
        <div class="talk other">
            <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="提案笙">
            <div class="main">
                <div class="title">
                    <span>提案笙</span>
                    <span>9月30日 21:47</span>
                </div>
                <div class="content">什么秘密，我觉得你现在跟我说什么都没有意义。</div>
            </div>
        </div>
    </li>
    <li>
        <div class="talk other">
            <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="淮南王铃">
            <div class="main">
                <div class="title">
                    <span>淮南王铃</span>
                    <span>10月8日 10:30</span>
                </div>
                <div class="content"><span class="at">@蝴蝶蓝</span>优秀</div>
            </div>
        </div>
    </li>
    <li>
        <div class="talk other">
            <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="蝴蝶蓝">
            <div class="main">
                <div class="title">
                    <span>蝴蝶蓝</span>
                    <span>昨天 22:13</span>
                </div>
                <div class="content">值得一听~~</div>
            </div>
        </div>
    </li>
    <li>
        <div class="talk mine">
            <div class="main">
                <div class="title">
                    <span>刚刚</span>
                    <span>Y优秀X</span>
                </div>
                <div class="content">围观戏精现场</div>
            </div>
            <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="Y优秀X">
        </div>
    </li>
</ul>

CSS

body {
    font-size: 40px;
}
ul {
    padding: 0 0.5em;
}
li {
    list-style: none;
    margin-bottom: 1.5em;
}
.mine {
    text-align: right;
}
.talk img {
    width: 15%;
    margin-top: 0.25em;
    border-radius: 50%;
    vertical-align: top;
}
.other img {
    margin-right: 0.5em;
}
.mine img {
    margin-left: 0.5em;
}
.talk .main {
    display: inline-block;
    max-width: 65%;
}
.talk .title>span {
    margin-right: 0.5em;
    color: #A3ADBA;
}
.talk .at {
    margin-right: 0.5em;
}
.talk .content {
    display: inline-block;
    position: relative;
    margin-top: 3%;
    padding: 0.6em 0.9em;
    border-radius: 0.5em;
    word-spacing: 5em;
}
.other .content {
    color: #3E434C;
    background-color: #F5F7FA;
}
.mine .content {
    color: #FFFFFF;
    background-color: #00BEFF;
}
.other .content:after {
    content: '';
    position: absolute;
    left: -1em;
    top: 0;
    border-right: 0.8em solid #F5F7FA;
    border-radius: 0 1em 0 0;
    width: 1em;
    height: 1em;
}
.mine .content:after {
    content: '';
    position: absolute;
    right: -1em;
    top: 0;
    border-left: 0.8em solid #00BEFF;
    border-radius: 1em 0 0 0;
    width: 1em;
    height: 1em;
}

wind1996 commented 5 years ago

链接

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul class='message-list'>
    <li class="message left">
        <img class="avatar" src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg"
             alt="提案笙">
        <div class="message-body">
            <div class="message-info"><a>提案笙</a> 9月30日 21:47</div>
            <div class="message-content">什么秘密，我觉得你现在跟我说什么都没有意义</div>
        </div>
    </li>
    <li class="message left">
        <img class="avatar" src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg"
             alt="淮南王玲">
        <div class="message-body">
            <div class="message-info"><a>淮南王玲</a> 10月8日 10:30</div>
            <div class="message-content">什么秘密，我觉得你现在跟我说什么都没有意义</div>
        </div>
    </li>
    <li class="message right">
        <img class="avatar" src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"
             alt="蝴蝶蓝">
        <div class="message-body">
            <div class="message-info"><a>蝴蝶蓝</a><span>昨天 22:13</span></div>
            <div class="message-content">什么秘密，我觉得你现在跟我说什么都没有意义</div>
        </div>
    </li>
    <li class="message left">
        <img class="avatar" src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg"
             alt="Y优秀X">
        <div class="message-body">
            <div class="message-info"><a>Y优秀X</a> 刚刚</div>
            <div class="message-content">什么秘密，我觉得你现在跟我说什么都没有意义</div>
        </div>
    </li>
</ul>
</body>
</html>

.message-list {
    background-color: #ffffff;
    padding: 10px;
}

.message {
    list-style: none;
    margin: 10px 0;
}

.message-body {
    margin: 0 56px;
    text-align: left;
}

.message.right .message-body {
    text-align: right;
}

img.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    float: left;
}

.message.right img.avatar {
    float: right;
}

.message-info {
    margin-bottom: 5px;
    font-size: 14px;
    color: #a1abb9;
}

.message.right .message-info {
    direction: rtl;
}

.message-content {
    position: relative;
    display: inline-block;
    padding: 10px;
    border-radius: 0 4px 4px 4px;
    background-color: #f5f7fa;
}

.message.right .message-content {
    background-color: #00beff;
    border-radius: 4px 0 4px 4px;
}

.message.left .message-content::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    border: 4px solid transparent;
    border-top-color: #f5f7fa;
    border-right-color: #f5f7fa;
}

.message.right .message-content::after {
    position: absolute;
    content: '';
    top: 0;
    right: -8px;
    border: 4px solid transparent;
    border-top-color: #00beff;
    border-left-color: #00beff;
}

frankyeyq commented 5 years ago

预览

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="chart-box">
        <div class="chart-item left">
            <img class="avatar" src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg"/>
            <div class="chart-message">
                <p class="top">
                    <span class="name">提案笙</span>
                    <span class="date">9月30日 21:47</span>
                </p>
                <div class="chart-message-content">
                    <span class="chart-message-content-text">什么秘密，我觉得你现在跟我说什么都没有意义。</span>
                </div>
            </div>
        </div>
        <div class="chart-item right">
            <img class="avatar" src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"/>
            <div class="chart-message">
                <p class="top">
                    <span class="name">Y优秀X</span>
                    <span class="date">刚刚</span>
                </p>
                <div class="chart-message-content">
                    <span class="chart-message-content-text">围观戏精现场</span>
                </div>
            </div>
        </div>
        <div class="chart-item left">
            <img class="avatar" src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg"/>
            <div class="chart-message">
                <p class="top">
                    <span class="name">提案笙</span>
                    <span class="date">9月30日 21:47</span>
                </p>
                <div class="chart-message-content">
                    <span class="chart-message-content-text">什么秘密，我觉得你现在跟我说什么都没有意义。什么秘密，我觉得你现在跟我说什么都没有意义。什么秘密，我觉得你现在跟我说什么都没有意义。什么秘密，我觉得你现在跟我说什么都没有意义。什么秘密，我觉得你现在跟我说什么都没有意义。什么秘密，我觉得你现在跟我说什么都没有意义。什么秘密，我觉得你现在跟我说什么都没有意义。什么秘密，我觉得你现在跟我说什么都没有意义。什么秘密，我觉得你现在跟我说什么都没有意义。</span>
                </div>
            </div>
        </div>
        <div class="chart-item right">
            <img class="avatar" src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg"/>
            <div class="chart-message">
                <p class="top">
                    <span class="name">Y优秀X</span>
                    <span class="date">刚刚</span>
                </p>
                <div class="chart-message-content">
                    <span class="chart-message-content-text">围观戏精现场围观戏精现场围观戏精现场围观戏精现场围观戏精现场围观戏精现场围观戏精现场围观戏精现场围观戏精现场围观戏精现场围观戏精现场</span>
                </div>
            </div>
        </div>
        <div class="chart-item left">
            <img class="avatar" src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg"/>
            <div class="chart-message">
                <p class="top">
                    <span class="name">提案笙</span>
                    <span class="date">9月30日 21:47</span>
                </p>
                <div class="chart-message-content">
                    <span class="chart-message-content-text">什么秘密，我觉得你现在跟我说什么都没有意义。</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<style lang="css">
    html, body{
        font-size: 12px;
    }
    p {
        margin: 0;
    }
    .chart-box .chart-item {
        display: flex;
        margin-bottom: 30px;
    }
    .chart-box .chart-item .chart-message .top {
        color: #a4adbb;
        font-size: 1.2rem;
        margin-bottom: 6px;
    }

    .chart-box .chart-item .chart-message .chart-message-content {
        position: relative;
        padding: 1.5rem;
        font-size: 1.5rem;
        color: #3b4049;
        line-height: 1.5;
        background-color: #f5f7fa;
        border-radius: 9px;
        box-sizing: border-box;
    }

    .chart-box .chart-item .chart-message .top .name {
        margin-right: 1rem;
    }

    .chart-box .chart-item .chart-message .top{
        display: flex;
    }
    .chart-box .chart-item.right .chart-message .top{
        justify-content: flex-end;
    }
    .chart-box .chart-item.right .chart-message .top .date {
        order: -1;
        margin-right: 10px;
    }
    .chart-box .chart-item .chart-message {
        box-sizing: border-box;
    }
    .chart-box .chart-item.right .chart-message {
        order: -1;
    }

    .chart-box .chart-item .avatar {
        width: 60px;
        height: 60px;
        display: block;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .chart-box .chart-item.left .avatar {
        margin-right: 20px;
    }
    .chart-box .chart-item.right .avatar {
        margin-left: 20px;
    }
    .chart-box .chart-item.right {
        justify-content: flex-end;
    }

    .chart-box .chart-item.left .chart-message .chart-message-content{
        background-color: #f5f7fa;
        border-color: #f5f7fa;
        margin-right: 80px;
    }

    .chart-box .chart-item.right .chart-message .chart-message-content{
        background-color: #00beff;
        color: white;
        border-color: #00beff;
        margin-left: 80px;
    }

    .chart-box .chart-item .chart-message .chart-message-content .chart-message-content-text {
        position: relative;
        z-index: 1;
    }

    .chart-box .chart-item .chart-message .chart-message-content::before {
        content: '';
        width: 1.5em;
        height: 1.5em;
        display: block;
        border-color: inherit;
        position: absolute;
    }
    .chart-box .chart-item.left .chart-message .chart-message-content::before {
        border-top-right-radius: 75%;
        border-right-width: 1.5em;
        border-right-style: solid;
        border-left-width: 0;
    }
    .chart-box .chart-item.right .chart-message .chart-message-content::before {
        border-top-left-radius: 75%;
        border-left-width: 1.2em;
        border-left-style: solid;
        border-right-width: 0;
    }
    .chart-box .chart-item.left .chart-message .chart-message-content::before {
        top: -2px;
        left: -1.5em;
    }
    .chart-box .chart-item.right .chart-message .chart-message-content::before {
        top: -2px;
        right: -1.5em;
    }
</style>

zhangxinxu commented 5 years ago

本次答疑重点要点：

基准字号使用16px，不用其它像素值。也不用使用100px。
media查询和vw技巧实现html基础尺寸动态化（无需JS）。
要有统一的类名命名空间，类似chat-。
遇到不同性质的命名，通常两种方式。1. 类名，但是命名上明显区分，例如chat-item__left。2. 使用属性选择器。
避免没必要的嵌套，百害无一益。
小尾巴的实现。边框+圆角，box-shadow+圆角，径向渐变
左右对称布局的实现：direction: rtl配合CSS逻辑属性
不推荐使用dl标签，可以给每个列表增加tabindex=0

liulyu commented 5 years ago


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS基础测试4</title>

</head>
<body>
    <ul class="wrap">
        <li class="cat-1">
            <img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" alt="" width="80px" height="80px" >
            <div class="content-wrap">
                <p class="nickname">提案者 9月30日 21:47</p>
                <p class="content">什么秘密，我觉得你现在跟我说什么都没有意义</p>
            </div>
        </li>

        <li class="cat-1">
                <img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" alt="" width="80px" height="80px" >
                <div class="content-wrap">
                    <p class="nickname">提案者 9月30日 21:47</p>
                    <p class="content">什么秘密，我觉得你现在跟我说什么都没有意义</p>
                </div>
        </li>

        <li class="cat-1">
                <img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" alt="" width="80px" height="80px" >
                <div class="content-wrap">
                    <p class="nickname">提案者 9月30日 21:47</p>
                    <p class="content">什么秘密，我觉得你现在跟我说什么都没有意义</p>
                </div>
        </li>

        <li class="cat-2">
                <img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" alt="" width="80px" height="80px" >
                <div class="content-wrap">
                    <p class="nickname">提案者 9月30日 21:47</p>
                    <p class="content">什么秘密，我觉得你现在跟我说什么都没有意义</p>
                </div>
        </li>
    </ul>
</body>
</html>```

```css
<style>
        .wrap{padding:10px;display: flex;flex-flow: column nowrap;list-style-type: none;margin:0;}
        p{margin: 0;}
        .cat-1{display: flex;flex-flow: row nowrap;align-items:flex-start;padding:20px 0}
        .content-wrap{padding:0 20px;width: 220px;position: relative}
        .content{background-color: #F5F7FA;margin-top:15px;padding:10px;border-radius: 10px;font-family:Arial, Helvetica, sans-serif
                }

        .nickname{color: #CAD0D7;}
        img{border-radius: 50%;}
        .cat-2{display: flex;flex-flow: row-reverse nowrap;align-items:flex-start;padding:20px 0}
        .cat-2 .content{background-color: #00BEFF;color:#fff}
        .cat-2 .nickname{text-align: right}
        .cat-1 .content-wrap::after{
            content: "";
            border-width: 10px;
            border-style: solid;
            border-color:  #fff #F5F7FA #fff #fff ;
            position: absolute;
            top:45px;
            left:0;
        }

        .cat-2 .content-wrap::after{
            content: "";
            border-width: 10px;
            border-style: solid;
            border-color:  #fff  #fff #fff #00BEFF;
            position: absolute;
            top:45px;
            right:0;
        }
    </style>```

zhangxinxu / quiz

CSS基础测试4 #16

3.31 补充 上面的代码 info-content 嵌套在 info-warp-content 内，考虑使用自动margin减少这一层嵌套。

css

有一个小问题ios10Safari浏览器，滚动还是存在页面缩放，没有找到好的解决方案，目前只简单的双击和两指去掉了缩放，请张老师指点。

3.31 补充上面的代码 info-content 嵌套在 info-warp-content 内，考虑使用自动margin减少这一层嵌套。