A width-responsive perfect square in pure CSS

Cover photo by Daniel McCullough via Unsplash.

Points of interest

Resizable block-level divs

The resize property - I wasn't aware you could actually control this past textareas, but stumbled upon it when looking for a way to make a user-resizable div without using JavaScript.

How the square is made

#square {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  background-color: #2980b9;
}

Breaking this down:

• width: 100% is to make sure it's defined as having the same width as its outer, resizable container.
• padding-bottom: 100% is based on a trick in the CSS spec. When specifying a margin or padding by percentage, it's always based on the width, even if it's a -top or -bottom property. In this way we get a property that's equal to the width.
• position: relative is so that I can put stuff inside it without disrupting the padding; any additional content would add content to the box, which would make it a rectangle
• background-color is there so you can see where it is ¯\_(ツ)_/¯

How the circle is made

Once you have any square, making a circle is easy enough. The only trick you really need is border-radius: 50%, but let's break down the responsive circle a bit more.

#circle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-width: 4px;
  border-color: #27ae60;
  border-style: solid;
  border-radius: 50%;
}

• position: absolute makes sure that this circle stays within the position: relative square while not adding any in-flow content to it.
• top: 0; bottom: 0; width: 100%; height: 100%; constrains the circle to the exact dimensions of the responsive square. At this point, what we have is a position: absolute container that is an inner copy of our square.
• The border-* properties are used to build the outline of the circle. We have a 4px green solid border, and it has a radius of half the edge of the square.

Quick geometry recap

Here's an illustration of why 50% is the magic number to make a circle from a square:

The radius of the circle is equal to half the side of the square.