如何在 Javascript 中制作可伸缩的聊天气泡？

Question

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

圆形部分可以拉伸，三角形将保持在中间大小不变。

我尝试过这些方法：

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

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

Answer 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);
}

<div class="message"></div>

如何在 Javascript 中制作可伸缩的聊天气泡？

How to make stretchable chat bubble in Javascript?

html

javascript

css

html5-canvas