本文共 1151 字，大约阅读时间需要 3 分钟。

???????????

1. ????

??????????????????????????????????????CSS??????????????????????

2. ????????

?CSS?????????????????????????????????

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

3. ???????

?????????????0???????????????????????????

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

4. ???????

??CSS border-color ??????????????????????? transparent????????????????

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

5. ??????

????CSS??????????????????????????????????????

   
        ??
   

?????????????????????????????