1、实际效果图
聊天气泡.jpg
2、页面结构
// html
<div class="box">
<div class = "before">
<p>哦My Love 咱们结婚吧</p>
<p>我会用一生去爱你的</p>
<p>我愿把一切都放下</p>
<p>给你幸福的家</p>
</div>
</div>
//css
* {
margin: 0;
padding: 0
}
html, body {
width: 100%;
}
.box{
width: 90%;
margin-left: 5%;
padding: 20px 0 0 0;
}
.before{
position:relative;/*日常相对定位*/
border:1px solid black;
border-radius:5px;
background:rgba(245,245,245,1);
font-size:12px;
padding:5px 10px;
}
.before:before,.before:after{
content:"";/*:before和:after必带技能*/
display:block;
position:absolute;/*日常绝对定位*/
top:8px;
width:0;
height:0;
border:6px solid transparent;
}
.before:before{
left:-11px;
border-right-color:rgba(245,245,245,1);
z-index:1
}
.before:after {
left: -12px;
border-right-color: rgba(0, 0, 0, 1);
z-index: 0
}
