欢迎光临
我们一直在努力

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

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

我们将该效果分成两部分,一部分是顶部的尖角,另一部分是底部的文本框。这边直接贴代码,大家可以根据需要自行调整,需要注意的是这边的三角形的切角深度是垂直于切角的直线距离,这边切角用的是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;
}
赞(0) 打赏
未经允许不得转载:半醉人间 » 微信小程序——尖角对话框
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏