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

【问题标题】：How to make stretchable chat bubble in Javascript?如何在 Javascript 中制作可拉伸的聊天气泡？
【发布时间】：2021-12-03 14:51:28
【问题描述】：

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

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

我已经尝试了这些方法：

使用clipPaths 绘制SVG。这里的问题是三角形没有保持相同的形状（它正在拉伸）。
CSS clip-path。这里的问题是我没有设法使用基本形状绘制这种形状。不幸的是，clip-path 不支持多个clip-path。
在canvas 中绘制气泡并用作背景。由于气泡应根据内部内容进行拉伸，因此问题是在内容更改大小时获取事件并为画布触发redraw。

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

【问题讨论】：

标签： javascript html css html5-canvas

【解决方案1】：

你可以使用::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);
}

&lt;div class="message"&gt;&lt;/div&gt;

【讨论】：

不幸的是，这是纯色，但我需要渐变。
可以添加渐变色...简单
以及如何将颜色与三角形对齐？这就是问题所在。
你必须单独给它上色
感谢您的想法 - 帮助很大。这里想多了。