This is a method of creating speech bubbles using only HTML and CSS without images.
Since it doesn't load images, it reduces the response time and page display time a bit.
This is written by a Japanese who can't speak English with the help of translation application. Sorry if it's not good.
Creating with just HTML and CSS won't make much of a difference in response time or page display time compared to the balloon using images or canvas.
However, since it uses only the basic functions of CSS, these small steps can lead to big improvements.
(But there's a weakness with the larger CSS size.)
Let's take a look at HTML and CSS and the results.
Placed on top
See the Pen Balloon top by tadtadya (@tadtadya) on CodePen.
The size of the balloon's arrow part changes depending on the size of the "border" property of ".balloon::before" and ".balloon::after".
Adjust the position of the balloon's arrow with the "margin-bottom" property of ".balloon" and the "left" and "top" properties of ".balloon::before" and ".balloon::after".
Placed under
See the Pen Balloon bottom by tadtadya (@tadtadya) on CodePen.
The balloons are adjusted in the same way as the above placement, except the properties used are different.
Placed to the left
See the Pen Balloon left by tadtadya (@tadtadya) on CodePen.
The same way to adjust the balloon.
Placed to the right
See the Pen Balloon right by tadtadya (@tadtadya) on CodePen.
The same way to adjust the balloon.
About the balloon arrows
The balloon's arrows make use of the corner feature of the "border" property. Take a look at the following sample.
See the Pen Balloon triangle by tadtadya (@tadtadya) on CodePen.
The "top", "left", "right", and "bottom" properties of the border are separated by a diagonal line connecting the corners of the outer and inner borders.
A triangle with a balloon's arrow uses this part of the border. For example, a downward-pointing triangle would look like this.
See the Pen Balloon triangle bottom by tadtadya (@tadtadya) on CodePen.
The size of the component is 0 and there is no substance, and the "border-left", "border-right", and "border-top" properties turn the "border-top" into a triangle.
In the balloon, I created a pseudo-element of "::before" and "::after".
By placing the triangle of "::after" on top of "::before" and shifting it slightly, the triangle line is created.
In this case, I did this because the background of the bubble was white. If the balloon background is not white and you don't want a balloon border, you don't need to use "::after".
