微信对话框小三角形实现
2016-05-12 00:14
639 查看
<!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>
相关文章推荐
- 我也有微信朋友圈了 Android实现
- 微信第三方授权登录返回错误信息: 40029
- WSTMall V1.6.0发布,支持QQ、微信登录,支持购物车信息插入数据库
- 产品知识分享:外链分享到微信的逻辑
- C#利用 Face++sdk 实现wpf小程序【1】 5/11/16
- 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(一 、上传图片)
- Ubuntu16.04 Genymotion 模拟器上安装微信
- C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能
- iOS 支付 [支付宝、银联、微信]
- Zabbix监控配置 邮件 微信告警
- 【分享】给做技术的战友们推荐一个不错的微信公号解解闷
- java 获取微信 页面授权 获取用户openid
- 微信浏览器禁止页面下拉查看网址
- 微信分享api使用函数
- 微信网页授权-函数封装
- 支付宝,微信,银联集成例子 (BUG是有的)
- Java小程序:模拟ATM取款
- 一招瞬间让微信公共平台菜单变的高大上,漂亮的方法(微信运营必看)
- 阿里云服务器调用微信支付接口慢的解决方案 (api.mch.weixin.qq.com)
- 微信js sdk图片接口 上传图片