HTML, CSS: How to make a circle

Other language site
ja ja
Google Translate
  • -

    シェア
  • ---

    LINEで送る
  • -

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

    pocket
  • -

    rss
html5 css3 logo

It is a simple way to make a circle with just HTML and CSS without using images etc., making it very easy.

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

Compared with the circle using images, etc., response time and page display time will be largely unchanged if it is improved significantly.

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.

The creation method is very easy. Just set width and height to the same value and set the border-radius value to half.

Actually, the same result can be obtained by setting border-radius value more than half. In other words, if you set the border-radius value to 50% or more, you can create a circle.

It uses the features of border-radius. Let's see the features of border-radius.

Let's look at the upper left as an example. border-top-left-radius specifies [horizontal diameter] [vertical diameter].

If only one value is specified, the diameter in the horizontal direction and the diameter in the vertical direction are the same, so draw a quarter of the circle. Other corners are the same designation method.

If you specify one value for border-radius, all the corners on the upper left, the upper right, the lower right, and the lower left draw a quarter of the circle.

That means that by specifying double the value of border-radius as width and height, the center of the square becomes the center of one quarter of the circle of each corner, resulting in the circle being drawn .

The present sentences are expressed as HTML, CSS as follows.

SNS also distributes articles.
Leave a Reply

*

If you like this article, share it!