内容内容内容内容内容
内容内容内容内容内容
利用 :before 和 :after 伪类添加样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css对话框箭头</title> <style> .comment{ width: 300px; border: 1px solid #376956; position: relative; background-color: #D0E9FF; padding: 10px 20px; border-radius: 8px; position: relative; margin-left: 20px; } .comment:before, .comment:after { content: ""; display: block; border-width: 12px; position: absolute; top: 20px; left: -24px; border-style: solid dashed dashed; border-color: transparent #376956 transparent transparent; font-size: 0; line-height: 0; } .comment:after { top: 20px; left: -23px; border-color: transparent #D0E9FF transparent transparent; } </style> <body> <div class="comment"> <p>内容内容内容内容内容</p> <p>内容内容内容内容内容</p> </div> </body> </html>posted on 2018-01-24 13:22 sonicwater 阅读( ...) 评论( ...) 编辑 收藏
转载于:https://www.cnblogs.com/sonicwater/p/8341193.html
