微信小程序实现对话框三角形

参考链接：
（1）流浪的诗人-微信对话框小三角形实现
https://www.cnblogs.com/wdlhao/p/5484141.html
【友情链接】https://github.com/wdlhao

（1）效果图

（2）代码

<!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>

微信小程序实现对话框三角形相关推荐

微信小程序-自定义对话框
<modal title="蓝牙扫描中...." hidden="{{deviceDialogHidden}}" bindconfirm="co ...
微信小程序前端各种酷炫的动画特效实例，这一篇就够了，复制开箱就用，赶快收藏好了
想看实际做出来的效果可以先扫码查看哦 1.文字跑马灯效果:微信小程序小技巧<十六>文字跑马灯,仿Table效果-小技巧系列-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信 ...
微信小程序实现css样式搭建（如三角形、正方形、圆形等）
参考链接: (1)微信小程序样式三角形搭建 http://www.voidcn.com/article/p-ngycxoje-brw.html [原文] http://blog.csdn.net/u0 ...
微信小程序三角形实现（评论三角形）
微信小程序三角形实现 (评论三角形) 效果 WXSS .productStatus {position: absolute;right: 0;top: 0;height: 1.81rem;width ...
微信小程序Demo组件大全（对话框、指示器、五星评分，画廊，影院座位……
微信小程序 - 自定义组件预览用微信web开发者工具打开src目录(请注意,是src目录,不是整个项目) 使用组件的wxml结构请看src/components/下的组件样式文件可直接引用src ...
微信小程序计算三角形面积
微信小程序--计算三角形面积代码文件: 一..js文件二..wxml文件三..wxss文件结果展示: 代码文件: 一..js文件代码如下: data: {result:"" ...
微信小程序自定义组件--对话框
自定义组件小程序基础库版本1.6.3开始,小程序支持简洁的组件化编程. 开发过程中,要重复使用到某些页面功能或是组件,一般我们思路是把对应的页面功能或是组件抽象成自定义组件,以便不同页面中重复使用. ...
微信小程序：模仿树形控件——画三角形
微信小程序:模仿树形控件--画三角形前言一.前端样式二.css 1.底边在左的三角形 2.底边在上的三角形前言微信小程序没有像element ui这样的框架,页面需要展现一个树形结构,于是就 ...
微信小程序计算三角形面积，三棱锥体积
微信小程序计算三角形面积,三棱锥体积 index.wxml: <view><form bindsubmit='formsubmit'><view>计算三角形的面积& ...

微信小程序实现对话框三角形

微信小程序实现对话框三角形相关推荐

最新文章

热门文章

微信小程序 实现对话框三角形

微信小程序 实现对话框三角形相关推荐

最新文章

热门文章

微信小程序实现对话框三角形

微信小程序实现对话框三角形相关推荐