vue聊天功能模块（三）聊天消息气泡

需求：左右聊天气泡

聊天气泡分为矩形和三角形
例如微信气泡

使用伪元素，设置三角形

<div class="chatBox chatBox-left">
    你好
</div>

    .chatBox{
        position: relative;
        margin:12px;
        padding:5px 8px;
        word-break: break-all;
        background: #ffffff;
        border: 1px solid #989898;
        border-radius: 5px;
        max-width:180px;
    }
    .chatBox-left::before{
        content: '';
        position: absolute;
        width: 100px;
        height: 100px;
        border: 50px solid;
        border-color: #3B64BC #3B64BC #3B64BC #bc3b4a;

    }

chatBox-left::before设置宽高时样式

现在把宽高设置为0

我们只需要三角形，只需把上、右、下边框颜色设置为白色即可

现在可以调整下三角形位置，大小

来看看

• CSS border-color 属性：
  -transparent 默认值。边框颜色为透明。

利用这个属性，方便的设置透明色

    .chatBox-left::before{
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: -20px;
        top:5px;
        border: 10px solid;
        border-color: transparent #bc3b4a transparent transparent ;
    }

这样就可以实现表情气泡效果了

现在来看看实际效果

实现样式

.LeftmsgBoxOut .msgContent{
    display: inline-block;
    min-width: 100px;
    margin-top: 2%;
    padding:5px 8px;
    border-radius: 5px;
    background-color: #5a64c1;
    width: auto;
    max-width: 500px;
    font-family: SourceHanSansCN-Medium;
    font-size: 26px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #e9e9e9;
    position: relative;
 }
.RightmsgBoxOut .msgContent{
    display: inline-block;
    min-width: 100px;
    margin-top: 2%;
    padding:5px 8px;
    border-radius: 5px;
    background-color: #5a64c1;
    width: auto;
    max-width: 500px;
    font-family: SourceHanSansCN-Medium;
    font-size: 26px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #e9e9e9;
    position: relative;
 }
.LeftmsgBoxOut .msgContent::before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left:10px;
    top:-18px;
    border: 10px solid;
    border-color: transparent  transparent #5a64c1 transparent ;
}
.LeftmsgBoxOut .msgContent::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left:10px;
    top:-18px;
    border: 10px solid;
    border-color: transparent  transparent #5a64c1 transparent ;
}
.RightmsgBoxOut .msgContent::before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right:12px;
    top:-18px;
    border: 10px solid;
    border-color: transparent  transparent #5a64c1 transparent ;
}
.RightmsgBoxOut .msgContent::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right:12px;
    top:-18px;
    border: 10px solid;
    border-color: transparent  transparent #5a64c1 transparent ;
}