微信小程序——尖角对话框

上一章中我们已经介绍了怎么实现切角效果，文章最后附带了三角形的实现方式，这边就利用三角形实现带尖角的对话框效果，角度方向可以根据需要调整。

我们将该效果分成两部分，一部分是顶部的尖角，另一部分是底部的文本框。这边直接贴代码，大家可以根据需要自行调整，需要注意的是这边的三角形的切角深度是垂直于切角的直线距离，这边切角用的是135deg也就是45度，所以深度跟边的比例是 1:√2

.testClass {
  width: 32rpx;
  height: 16rpx;
  background: #58a;
  background-color: #58a;
  background: linear-gradient(135deg, transparent 11rpx, blue 0) top left,
                linear-gradient(-135deg, transparent 11rpx, blue 0) top right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

.contentClass {
  width: 300rpx;
  height: 100rpx;
  border-radius: 25rpx;
  background-color: blue;
}