For years, I have just saved the image as a background or cut the tail part and use that as the background; I have always used an image when coding on websites. Is there a way to do it without using an image now? I can create the box with rounded corners using CSS, but how can I make the tail?
bubbles = []; Then we can create a bubble with arbitrary size and color with the following function. Noticed that the height and width are 2 times the size, in our scenario bubble. bubbleSize indicates the radius of the bubble, which is half of the width or height.
Approach: The basic idea is to create a section using <lspan> element, give it a round shape then by using the CSS animation property translateY the bubble can be moved up and down along the Y-axis. The following steps can be followed to obtain the desired result.
Try this; http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With