CODEWITHSUNDEEP
javascripthtmlcsshtml5-canvas
ArmandsB
ArmandsB

Reputation: 25

How to make stretchable chat bubble in Javascript?

I would like to make stretchable bubble chat shape in Javascript. It should have gradient color as background and possibility to add border around the shape. The result would be something like this:

enter image description here

The rounded part would be stretchable and triangle will stay in middle in same size.

I have tried these approaches:

  1. Draw SVG with clipPaths. Problem here was that triangle was not staying in same shape (it was stretching).

  2. CSS clip-path. Problem here was that I did not manage to draw this kind of shape using basic shapes. unfortunately, clip-path is not supporting multiple clip-path at once.

  3. Draw bubble in canvas and use as background. As bubble should stretch based on content inside, then the issue is to get events when content changed size and trigger redraw for canvas.

For now, canvas approach could be the easiest, but maybe there is some other solutions which I am missing.

Upvotes: 0

Views: 645

Answers (1)

DecPK
DecPK

Reputation: 25406

You can use ::after to achieve the result

.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>

Upvotes: 2

Related Questions