css仿聊天气泡样式

css仿聊天气泡

/*原理：使用:after与:before伪类实现，侧边小冒尖可根据自己实际需求转换方向*/
/*示例：带边框的聊天气泡*/
.chatMsgModule{
    width:300px;
    height:60px;
    background:#cde5ff;
    margin-left:15px;
    border:1px solid #c2dfff;
}
.chatMsgModule:after{
    content:'';
    width:0;
    height:0;
    border-color:transparent #cde5ff transparent transparent;
    border-style:solid;
    border-width:6px;
    position:absolute;
    top:12px;
    right:100%;
    border-radius:3px;
}
.chatMsgModule:before{
    content:'';
    width:0;
    height:0;
    border-color:transparent #c2dfff transparent transparent;
    border-style:solid;
    border-width:7px;
    position:absolute;
    top:11px;
    right:100%;
    border-radius:3px;
}

带边框聊天气泡.png

/*示例：无边框的聊天气泡*/
.chatMsgModule{
    width: 120px;
    height: 80px;
    background: red;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.chatMsgModule:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid red;
    border-bottom: 13px solid transparent;
}

*推荐大家一个css绘制形状的网站:https://css-tricks.com/the-shapes-of-css/

注：该文主要针对聊天气泡的整理,有需要请自取哦~