嗯……我们设计师强烈要求一定要圆角！圆角的气泡对话框，不要那种尖角的。这其中还遇上了个尴尬的问题，z-index不生效
无非就是两种方法，一种是使用图片再定位拼接起来使用，太简单了具体就不详细的说了。另一种方法就是border来写了，虽然怎么写都是尖角的，可是我想尝试一下。纯手写写出设计师想要的圆角吧
什么是圆角的？什么是尖角的？以下图片可以对比出来:
这种是尖角：
这种是圆角：
尖角的方法网上一搜也是一大堆，其中有我最喜欢的阮大神的方法，阮大神博文在此（可点击）：http://www.ruanyifeng.com/blog/2010/04/css_speech_bubbles.html
而圆角的一个思路是使用边框加上背景色使用
html
<view class='dialog u-tri'>
aaaaaaaaaa </view>
web端把view标签修改为div标签即可
css
.dialog{
position: relative;
display: inline-block;
width: 250px;
background-color: green;
padding: 30px;
z-index: ;
}
.u-tri::before{
position: absolute;
left: -4px;
top: 4px;
content: '';
width: 50px;
height: 50px;
border-style:solid;
border-width:2px;
border-color: red ;
border-radius:6px;
background-color: red;
transform:rotate(45deg);
z-index: -;
}
这里的 z-index 有个需要注意的地方，父必须得设置 z-index。如果不设置，那么 u-tri 会直接不见
效果
真机预览和微信开发工具的一样，把背景颜色都调成一样的，调整下位置和大小即可解除设计师的怨念,
另外注意一下，小程序使用可以根据需要将px单位改成rpx单位。我这边只做简单演示，小程序端最好是使用rpx单位哈