預(yù)覽：
html:
<div class="div1">
? ? <p>qq對話</p>
</div>
css:
* {
? ? margin:0;
? ? padding:0
}
.div1 {
? ? width:120px;
? ? height:60px;
? ? margin-top:40px;
? ? margin-left:60px;
? ? text-align:center;
? ? line-height:60px;
? ? font-size:20px;
? ? color:white;
? ? background-color:darkblue;
? ? border-radius:5px;
? ? position:relative;
}
.div1:before {
? ? content:"";
? ? position:absolute;
? ? background-color:darkblue;
? ? border-radius:0px 0px 80px 0px/0px 0px 80px 0px;
? ? width:20px;
? ? height:40px;
? ? top: -10px;
? ? left:120px;
}
.div1:after {
? ? content:"";
? ? position:absolute;
? ? background-color:white;
? ? border-radius:0px 0px 40px 0px/0px 0px 60px 0px;
? ? width:23px;
? ? height:20px;
? ? top: -10px;
? ? left:120px;
}
