通过两个三角形来叠加出边框来实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; } .reply { position: relative; margin: 0.672rem 0 0.096rem 0; padding: 0.408rem 0.816rem; border: 1px solid #fcbb08fb; border-radius: 0.2rem; background-color: #fcbb0813; } .reply:after { content: ""; width: 0px; height: 0px; border-color: transparent transparent #faf8f3 transparent; border-style: solid; border-width: 6px; position: absolute; top: -11px; border-radius: 3px; left: 18px; right: auto; } .reply:before { content: ""; width: 0px; height: 0px; border-color: transparent transparent #fcbb08fb transparent; border-style: solid; border-width: 7px; position: absolute; top: -14px; border-radius: 3px; left: 17px; right: auto; } .content-style { width: 100px; height: 100px; background-color: #91a192; } </style> </head> <body> <div class="reply"> <div class="content-style"></div> 这里是内容区域 </div> </body> </html>