border-radius实现qq对话框样式(小尾巴)
2019-08-28 本文已影响0人
_owl
预览：
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;
}
