这次要做一个聊天天界面的样式，如图：
微信图片_20181116103800.png
在网上查了很多箭头对话框的这种例子，都是用定位做的并且还脱离文档流，箭头还会跟着对话的内容而变动，最后终于整出来了，废话不多说，上代码：
<head>
<meta charset="UTF-8">
<title></title>
<style>
.info {
position: relative;
background: #F0F5FF;
border-radius: 4px;
color: #000;
max-width:80%;
display:flex;
justify-content:flex-start;
padding:10px;
margin:13px 0 21px 0;
}
.nav {
position: absolute;
left: 30px;
overflow: hidden;
width: 0;
height: 0;
border-width: 10px;
border-style: solid dashed dashed dashed;
}
.nav-border {
top: -20px;
border-color: transparent transparent #F0F5FF transparent;
}
.nav-background {
top: -19px;
border-color: transparent transparent #F0F5FF transparent;
}
.box{border:1px solid red;padding:10px;width:600px;}
.rightInfo{
/*margin:50px 0;*/
background: #0096FF;
color:#fff;
display:flex;
justify-content:flex-end;
}
.rightNav-background{
border-color: transparent transparent #0096FF transparent;
}
.rightNav-border {
top: -20px;
border-color: transparent transparent #0096FF transparent;
}
.leftBox{
display:flex;justify-content:flex-start;
}
.rightBox{
display:flex;justify-content:flex-end;
}
.rightnav{
position: absolute;
right: 10px;
overflow: hidden;
width: 0;
height: 0;
border-width: 10px;
border-style: solid dashed dashed dashed;
}
</style>
</head>
<body>
<div class='box'>
<div class='leftBox'>
<div class="info">
<span>您好，我是HelloWord！</span>
<div class="nav nav-border"></div>
<div class="nav nav-background"></div>
</div>
</div>
<div class='rightBox'>
<div class="info rightInfo">
<span>今天天气太好了！</span>
<div class=" rightnav nav-border rightNav-border"></div>
<div class=" rightnav nav-background rightNav-background"></div>
</div>
</div>
</div>
</body>
这个真的很好用，向我上述说的问题都没有出现！
网友评论