border-radius实现qq对话框样式(小尾巴)

预览：

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;

}