通过border来实现小三角形,模拟微信的对话框:
<div class="left">
<p>你好,我是卖茶叶的</p>
</div>
<div class="right">
<p>你好,我是种茶的</p>
</div>
其中,CSS这样设置:
.left,.right{
min-height: 60px;
position: relative;
left: 10px;
display: table;
text-align: center;
border-radius: 7px;
background-color:#9EEA6A;
}
.right{ /*使左右的对话框分开*/
top: 20px;
left: 150px;
background-color: #FC3;
}
.left > p,.right > p{ /*使内容居中*/
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
.left:before,.right:after{ /*用伪类写出小三角形*/
content: '';
display: block;
width: 0;
height: 0;
border: 16px solid transparent;
position: absolute;
top: 11px;
}
/*分别给左右两边的小三角形定位*/
.left:before{
border-right: 16px solid #9EEA6A;
left: -30px;
}
.right:after{
border-left: 16px solid #FC3;
right: -30px;
}