使用css實現QQ聊天氣泡效果
阿新 • • 發佈:2019-02-05
這是效果圖~
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; }