【图形】CSS绘制聊天气泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【图形】CSS绘制聊天气泡</title> <style> #talkbubble { width: 200px; height: 130px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin: 30px 0 0 50px; } #talkbubble:before { content:""; position: absolute; right: 100%; top: 36px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; } </style> </head> <body> <div id="talkbubble"></div> </body> </html>