Height = Width Via CSS

In this article, I will tell you how to make circles in pure CSS that will change their diameter depended on the length of their context.

Why does this code work?

First, make an element for each circle.

1. Align the inscription vertically:

display: flex; 
align-items: center;

2. Make beautiful intends and background for each circle

padding: 40px; 
margin: 10px;
background: #05a87c;
color: #fff;

3. The width of float element equals to content https://www.w3.org/TR/CSS2/visudet.html#float-width
All float elements became block elements which means their height is equal to children's height.

float: left; 

3. Make height equals width with a pseudo-element ::before

.circle::before {
    content: "";
    margin-top: 100%;
}

The margin is calculated related to width. Despite ::before has property display is equal to inline by default, in this situation display is flex, because all children of flex container became flexible. So, we can calculate the margin.

PROFIT

Thanks for reading! 👏

Codepen here