html编写气泡对话框,HTML+CSS入门 纯CSS手写圆角气泡对话框

本篇教程介绍了HTML+CSS入门 纯CSS手写圆角气泡对话框，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

嗯……我们设计师强烈要求一定要圆角！圆角的气泡对话框，不要那种尖角的。这其中还遇上了个尴尬的问题，z-index不生效

无非就是两种方法，一种是使用图片再定位拼接起来使用，太简单了具体就不详细的说了。另一种方法就是border来写了，虽然怎么写都是尖角的，可是我想尝试一下。纯手写写出设计师想要的圆角吧

什么是圆角的？什么是尖角的？以下图片可以对比出来:

这种是尖角：

这种是圆角：

尖角的方法网上一搜也是一大堆，其中有我最喜欢的阮大神的方法，阮大神博文在此(可点击)：http://www.ruanyifeng.com/blog/2010/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知识！