HTML, CSS: How to make a balloon

Other language site
ja ja
Google Translate
  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
html5 css3 logo

It is a way to make a balloon with only HTML and CSS without using images etc.

Since it is not necessary to read the image, response time and page display time can be shortened while minimizing.

Compared to balloons using images and the like, response time and page display time are not greatly improved.

However, the accumulation of such small things leads to great improvement as a result. It is one way to do that.

Let's start with HTML, CSS, and the results.

Above balloon

You can change the size of the balloon arrow portion with the size of boder:before and. balloon:after boder.

Adjust the position of the balloon arrow at the margin-bottom of .balloon and left, top of .balloon:before and .balloon:after.

Bottom of a balloon

The method of adjusting the balloon is the same as the balloon on the top.

Left of a balloon

The method of adjusting the balloon is the same as the balloon on the top.

Right of a balloon

The method of adjusting the balloon is the same as the balloon on the top.

 About the balloon arrow

For the balloon arrows, we use the border's horn feature. First of all, look at the sample below to see the features of border.

Angle which is the contact of top, left, right, bottom of border is divided by oblique line connecting corner of outer contour and corner of inner contour. In this way the corners of border are accurately represented.

The triangle of the balloon arrow uses this part. For example, create a downward triangle like this.

In a balloon, this is created with pseudo elements of :before, :after. Also, triangle lines are expressed by overwriting the :after triangle slightly on :before.

This time, because the background color of the balloon was colorless it is represented by such a line. If the background color of the balloon is colored, it is expressed as :before only.

SNS also distributes articles.
Leave a Reply

*

If you like this article, share it!