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.
- Align the inscription vertically:
2. Make beautiful intends and background for each circle
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.
3. Make height equals width with a pseudo-element
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.
Thanks for reading! 👏