时间戳

首页 > 解决方案 > 如何在 Javascript 中制作可拉伸的聊天气泡？

javascript - 如何在 Javascript 中制作可拉伸的聊天气泡？

问题描述

我想在 Javascript 中制作可拉伸的气泡聊天形状。它应该具有渐变色作为背景，并且可以在形状周围添加边框。结果将是这样的：

在此处输入图像描述

圆形部分将是可拉伸的，三角形将保持在相同大小的中间。

我已经尝试过这些方法：

  1. 用clipPaths. 这里的问题是三角形没有保持相同的形状（它正在拉伸）。

  2. CSS clip-path。这里的问题是我没有设法使用基本形状绘制这种形状。不幸的clip-path是，一次不支持多个clip-path。

  3. 绘制气泡canvas并用作背景。由于气泡应根据内部内容进行拉伸，因此问题是在内容更改大小并触发redraw画布时获取事件。

目前，canvas方法可能是最简单的，但也许还有一些我缺少的其他解决方案。

标签： javascripthtmlcsshtml5-canvas

解决方案

您可以使用::after来实现结果

.message {
  display: inline-block;
  height: 120px;
  width: 130px;
  border-radius: 8px;
  position: relative;
  background: rgb(2, 0, 36);
  background: linear-gradient(10deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

.message::after {
  content: "";
  background-color: black;
  height: 16px;
  width: 16px;
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
}
<div class="message"></div>

推荐阅读