0
267
ViewsHow 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:
The rounded part would be stretchable and triangle will stay in middle in same size.
I have tried these approaches:
Draw SVG with
clipPaths. Problem here was that triangle was not staying in same shape (it was stretching).CSS
clip-path. Problem here was that I did not manage to draw this kind of shape using basic shapes. unfortunately,clip-pathis not supporting multipleclip-pathat once.Draw bubble in
canvasand use as background. As bubble should stretch based on content inside, then the issue is to get events when content changed size and triggerredrawfor canvas.
For now, canvas approach could be the easiest, but maybe there is some other solutions which I am missing.
1 answers
Answer question0
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>