本篇教程介绍了HTML+CSS入门 纯CSS手写圆角气泡对话框，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
<
嗯……我们设计师强烈要求一定要圆角！圆角的气泡对话框，不要那种尖角的。这其中还遇上了个尴尬的问题，z-index不生效
无非就是两种方法，一种是使用图片再定位拼接起来使用，太简单了具体就不详细的说了。另一种方法就是border来写了，虽然怎么写都是尖角的，可是我想尝试一下。纯手写写出设计师想要的圆角吧
什么是圆角的？什么是尖角的？以下图片可以对比出来:
这种是尖角：
这种是圆角：
尖角的方法网上一搜也是一大堆，其中有我最喜欢的阮大神的方法，阮大神博文在此(可点击)：/blog//04/css_speech_bubbles.html
而圆角的一个思路是使用边框加上背景色使用
html
aaaaaaaaaa
web端把view标签修改为div标签即可
css
.dialog{
position:relative;
display:inline-block;
width:250px;
background-color:green;
padding:30px;
z-index:2;
}
.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:-1;
}
这里的z-index有个需要注意的地方，父必须得设置z-index。如果不设置，那么u-tri会直接不见
效果
真机预览和微信开发工具的一样，把背景颜色都调成一样的，调整下位置和大小即可解除设计师的怨念,
另外注意一下，小程序使用可以根据需要将px单位改成rpx单位。我这边只做简单演示，小程序端最好是使用rpx单位哈
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
