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 ;
}