HTML+CSS入门纯CSS手写圆角气泡对话框-职坐标

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

沉沙 2018-10-25 来源：阅读 1564 评论 0

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

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

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

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

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

这种是尖角：

这种是圆角：

尖角的方法网上一搜也是一大堆，其中有我最喜欢的阮大神的方法，阮大神博文在此（可点击）：//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: 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单位哈