【图形】CSS绘制提示框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【图形】CSS绘制提示框</title> <style> #talkbubble { width: 120px; height: 46px; background: red; position: relative; border : 5px solid red; border-radius : 5px; margin: 30px 0 0 200px; color: #fff; display: flex; justify-content: center; align-items: center; } #talkbubble:before { content:""; position: absolute; right: 100%; top: 24px; width: 0; height: 0; border-top: 16px solid transparent; border-right: 100px solid red; transform:rotate(-10deg); } </style> </head> <body> <div id="talkbubble">三十客</div> <h2><a href="https://segmentfault.com/q/1010000016028249">思否-前端如何实现这种不规则的三角形?</a></h2> </body> </html>