css--畫一個帶有邊框的三角形(類似於QQ的聊天框)
阿新 • • 發佈:2017-12-07
relative png image width css img 技術分享 白色 pos
使用css畫出如下的聊天框:
結構:<div class="chat"></div>
css:
.chat{ width: 300px; height: 80px; border: 1px solid #ccc; position: relative; } .chat:before{ content: ""; position: absolute; left: -10px; top: 34px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #ccc; } .chat:after{ content: ""; position: absolute; left: -8px; top: 34px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #fff; }
使用:before畫出一個深色的三角形,然後使用:after畫出一個白色的三角形,兩個三角形錯開2px。
css--畫一個帶有邊框的三角形(類似於QQ的聊天框)