(小程序篇)15.气泡框样式

说明：使用css3完成气泡框

1.画出一个长方形

.wxml

<view class="bubble"></view>

.wxss

.bubble{
  width:340rpx;
  height:160rpx;
  background:#fff;
  border:1rpx solid #ddd;
  border-radius: 14rpx;
  position: relative; /* 用于定位使用 */
}

• 效果图

2.长方形上边画一个灰色三角形

.wxss

.bubble::before{
  content: '';
  position: absolute;
  left: 200rpx;
  top: -36rpx;
  z-index: 1;
  width: 0;
  height: 0;
  border: 18rpx solid;
  border-color: transparent transparent #ddd transparent;
}

效果图

3.长方形上边再画一个白色三角形

.wxss

.bubble::after{
  content: '';
  position: absolute;
  left:100rpx;
  top:-36rpx;
  z-index: 2;
  width: 0;
  height: 0;
  border: 18rpx solid;
  border-color: transparent transparent #fff transparent;
}

效果图

4.实现气泡效果

说明：当我们出现一个灰色三角和白色三角，这时候只需将白色三角覆盖在灰色三角之上，且白色三角往下挪点距离，即可实现气泡效果。

• 只需要将::after之内的css样式left和top进行修改
  
• left:200rpx;top:-32rpx;

5.完全体代码

.wxml

<view class="bubble"></view>

.wxss

.bubble{
  width:340rpx;
  height:160rpx;
  background:#fff;
  border:1rpx solid #ddd;
  border-radius: 14rpx;
  position: relative;
}
.bubble::before{
  content: '';
  position: absolute;
  z-index: 1;
  left: 200rpx;
  top: -36rpx;
  width: 0;
  height: 0;
  border: 18rpx solid;
  border-color: transparent transparent #ddd transparent;
}
.bubble::after{
  content: '';
  position: absolute;
  left:200rpx;
  top:-32rpx;
  z-index: 2;
  width: 0;
  height: 0;
  border: 18rpx solid;
  border-color: transparent transparent #fff transparent;
}

最终版效果图(PS:具体气泡口展现线宽需要开发过程中自己调试)