Блог

Я хотел бы сделать растягивающуюся форму пузырькового чата в Javascript. Он должен иметь градиентный цвет в качестве фона и возможность добавления границы вокруг фигуры. Результат был бы примерно таким:

Закругленная часть будет растягиваться, а треугольник останется посередине того же размера.

Я пробовал эти подходы:

1. Нарисуйте SVG с clipPaths помощью . Проблема здесь заключалась в том, что треугольник не оставался в прежней форме (он растягивался).
2. CSS clip-path . Проблема здесь заключалась в том, что мне не удалось нарисовать такую фигуру, используя базовые фигуры. к сожалению, clip-path не поддерживает несколько clip-path одновременно.
3. Нарисуйте пузырь canvas и используйте его в качестве фона. Поскольку пузырь должен растягиваться на основе содержимого внутри, проблема заключается в том, чтобы получать события, когда содержимое меняло размер и запускало redraw холст.

На данный момент 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>