quiz
quiz copied to clipboard
Published
20 hours ago •
zhangxinxu
zhangxinxu
CSS基础测试4
完成下图所示的布局效果，只要兼容移动端即可：
得分要点： • 视觉还原（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
<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;
}
<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">淮南王玲 10月8号 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">淮南王玲 10月8号 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">淮南王玲 10月8号 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">淮南王玲 10月8号 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;
}
<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%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script>
(function(){
var html = document.documentElement;
var hwidth = html.getBoundingClientRect().width;
html.style.fontSize = hwidth/71.8 + 'px';
})()
</script>
</head>
<body>
<section class="mb36">
<div class="avatar">
<img src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" />
</div>
<div class="right">
<p class="name">
<span class="mr18">提案笙</span>
<span class="mr18">9月30日</span>
<time>21:47</time>
</p>
<p class="content">
什么秘密,我觉得你现在跟我说什么都没有意义。
</p>
</div>
</section>
<section class="mb36">
<div class="avatar">
<img src="https://tvax4.sinaimg.cn/crop.0.0.512.512.180/6cd7bd09ly8fsnom1e5wtj20e80e8gm7.jpg" />
</div>
<div class="right">
<p class="name">
<span class="mr18">提淮南王铃</span>
<span class="mr18">10月8日</span>
<time>10:30</time>
</p>
<p class="content">
@蝴蝶蓝 优秀
</p>
</div>
</section>
<section class="mb36">
<div class="avatar">
<img src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" />
</div>
<div class="right">
<p class="name">
<span class="mr18">蝴蝶蓝</span>
<span class="mr18">昨天</span>
<time>22:13</time>
</p>
<p class="content">
值得一听 ~ ~
</p>
</div>
</section>
<section class="mb36 right-handle">
<div class="avatar">
<img src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg" />
</div>
<div class="right right-handle">
<p class="name ">
<span class="mr18">Y优秀X</span>
<span class="mr18">刚刚</span>
</p>
<p class="content">
围观戏精现场
</p>
</div>
</section>
</body>
</html>
html,body,section, p{
margin:0;
padding:0;
}
section{
padding-left: 1.4rem;
display: flex;
}
.avatar{
margin-top: 1.2rem;
margin-start: 10.8rem;
}
.avatar img{
display:block;
width: 8.8rem;
height:8.8rem;
border-radius: 50%;
}
section .right{
display:inline-block;
max-width: 47rem;
}
.right .name{
display: flex;
color: #909bab;
line-height: 2;
font-size: 2.6rem;
}
.right .content{
padding-left: 2.5rem;
letter-spacing: 0.15em;
font-size: 2.8rem;
color: #2c3038;
line-height: 4.6rem;
background:#f2f5f9;
border-radius: 11px;
}
.right-handle{
flex-direction: row-reverse;
}
.mr18{
margin-right: 1.8rem;
}
.mb36{
margin-bottom: 3.6rem;
}
jsbin地址:https://jsbin.com/suyunipano/edit?html,css,output
<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;
}
<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;
}
<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;
}
查看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;
}
<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;
}
<!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);
}
<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;
}
预览 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
}
<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;
}
<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;
}
<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;
}
<!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%;
}
地址
如果背景不是纯色，小角会考虑使用图片或者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>
<!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}} {{chat.userName}}</span>
<span v-if="!chat.isOwner">{{chat.userName}} {{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
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%;
}
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>
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);
}
有一个小问题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>
<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;
}
}
}
}
}
<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;
}
<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
}
<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;
}
在线预览地址 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> 10月8号</span>
<span> 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> 10月8号</span>
<div class="message-container">
<p class="message-content">
什么秘密，我觉得你现在跟我说什么都没有意义。
</p>
</div>
</div>
</li>
</ul>
</div>
</main>
</body>
预览地址： 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;
}
预览地址：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>
<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>
<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>
<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>
<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;
}
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;
}
小三角，没什么思路，照着第一个写，结果还写不出那个样子，好气啊。
<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;
}
