使用css实现QQ聊天气泡效果

来源：互联网发布：人过五十知天命感慨编辑：程序博客网时间：2024/04/20 19:17

这是效果图~

html代码：

    <div class="bubbleDiv">        <div class="bubbleItem">     <!--左侧的泡泡-->            <span class="bubble leftBubble">                老师，你好！                <span class="bottomLevel"></span>                <span class="topLevel"></span>            </span>        </div>        <div class="bubbleItem clearfix">   <span style="font-family: Arial, Helvetica, sans-serif;"><!--右侧的泡泡--></span>            <span class="bubble rightBubble">                老师，你好！                <span class="bottomLevel"></span>                <span class="topLevel"></span>            </span>        </div>        <div class="bubbleItem">            <span class="bubble leftBubble">                老师，你好！                <span class="bottomLevel"></span>                <span class="topLevel"></span>            </span>        </div>        <div class="bubbleItem">            <span class="bubble leftBubble">                老师，你好！                <span class="bottomLevel"></span>                <span class="topLevel"></span>            </span>        </div>    </div>

css代码：

        .bubbleDiv{            width: 1000px;            margin: 0 auto;            height: 1000px;            border: 1px solid #4a4f58;        }        .bubbleItem{            width: 100%;        }        .bubble{            max-width: 655px;            position: relative;            line-height: 30px;            padding-left: 10px;            padding-top: 3px;            padding-bottom: 3px;            border-radius: 7px;            margin-top: 15px;            padding-right: 10px;            display: inline-block;        }        .leftBubble{            position: relative;            margin-left: 25px;            border: 1px solid #00b6b6;            background-color: #f8fdfc;        }        .leftBubble .bottomLevel{            position: absolute;            top: 10px;            left: -10px;            border-top: 10px solid #00b6b6;            border-left: 10px solid transparent;        }        .leftBubble .topLevel{            position: absolute;            top: 11px;            left: -8px;            border-top: 10px solid #f8fdfc;            border-left: 10px solid transparent;            z-index: 100;        }        .rightBubble{            position: relative;            margin-right: 25px;            float: right;            border: 1px solid #aaa;        }        .rightBubble .bottomLevel{            position: absolute;            bottom: 11px;            right: -10px;            border-bottom: 10px solid #aaa;            border-right: 10px solid transparent;        }        .rightBubble .topLevel{            position: absolute;            bottom: 12px;            right: -8px;            border-bottom: 10px solid #fff;            border-right: 10px solid transparent;            z-index: 100;        }        .clearfix:after {            visibility: hidden;            display: block;            font-size: 0;            content: " ";            clear: both;            height: 0;        }

0 0