微信对话框小三角形实现
2016-05-12 00:14 流浪的诗人 阅读(1612) 评论(0) 编辑 收藏 举报<!DOCTYPE html> <html> <head> <title>微信会话小三角</title> <meta charset="utf-8"> <style type="text/css"> body { font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; height: 100%; -webkit-background-size: cover; background-size: cover; -webkit-font-smoothing: antialiased; line-height: 1.6; } ::-webkit-scrollbar-track { background-color: transparent; } .bubble.right:before, .bubble.right:after { left: 100%; } .bubble.left:before, .bubble.left:after { left: 100%; } /* 1. 描绘出位置和形状;*/ .bubble:before, .bubble:after { position: absolute; top: 14px; border: 6px solid transparent; content: " "; } /* 2.border-left:color,width设置; */ .bubble.bubble_primary.right:after { border-left-color: #b2e281; border-left-width: 4px; } /*3。div背景颜色*/ .bubble.bubble_primary.right { background-color: #b2e281; margin-bottom: 20px; } .bubble.bubble_primary.left { background-color: #b2e221; } .bubble.bubble_primary.left:before { border-right-color: #b2e281; border-right-width: 4px; left: -10px; } .bubble_cont { word-wrap: break-word; word-break: break-all; min-height: 25px; } .bubble { max-width: 500px; min-height: 1em; /* display: inline-block; */ vertical-align: top; position: relative; text-align: left; font-size: 14px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin: 0 10px; } .bubble_cont .plain { padding: 9px 13px; } pre { margin: 0; font-family: inherit; font-size: inherit; white-space: pre-wrap; word-break: initial; } </style> </head> <body> <div class="bubble js_message_bubble ng-scope bubble_primary right"> <div class="bubble_cont ng-scope" > <div class="plain"> <pre class="js_message_plain ng-binding" >好久不见了,最近好吗?</pre> </div> </div> </div> <div class="bubble js_message_bubble ng-scope bubble_primary left"> <div class="bubble_cont ng-scope" > <div class="plain"> <pre class="js_message_plain ng-binding" >还好,你那边怎么样?</pre> </div> </div> </div> </body> </html>
你的关注和支持是对我最大的动力~
书山有路群[一个非常活跃的读书分享群,每周都有新书分享]:452450927
微博:http://weibo.com/u/2241641312
出处:http://www.cnblogs.com/wdlhao/
github:https://github.com/wdlhao
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面