聊天会话框气泡

Posted 2021-01-16 prospective-zkq

1.聊天会话框气泡的实现

我们将一个div的width、height、font-size设置为0，给它一个border-width值，border-color给定四种不同的颜色，此时我们会看到该div由四个三角形组成的，由此我们可以根据需要保留需要的三角形，其他三个三角形定义为透明transparent，最后使用定位。实现代码如下：

html：

<div class="contain">
    <div class="angle"></div>
</div>

CSS:

<style>
    *{
        padding:0;
        margin: 0;
    }
   body{
       background-color: #aaa;
   }
    .contain{
        margin: 20px auto;
        position: relative;
        width: 200px;
        height: 100px;
        border: 1px solid #aaa;
        background-color: #fff;
    }
    .angle {
        width:0;
        height:0;
        font-size:0;
        border:solid 10px;
        border-color:transparent #fff transparent transparent;
        position: absolute;
        top: 30px;
        left: -20px;
    }
</style>
效果图：