loading...
Cover image for A width-responsive perfect square in pure CSS

A width-responsive perfect square in pure CSS

tchaflich profile image Thomas C. Haflich ・2 min read

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:

A very pixelated drawing showing a circle inside a square with some radials. It's very geometric.

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

Posted on by:

Discussion

pic
Editor guide
 

position: absolute? Is it reference to document (root)?

 

Hey can you help me do a responsive triangle instead? I've been trying for a while and can't get it to work

 

I'm going to guess that you're going to need a bit of trigonometry if you're unlucky, 2D CSS transforms (specifically rotate), and the ::before & ::after pseudo-elements. My initial approach would be to construct the lines of out the borders of the before/after elements and rotate them into place.

(This is assuming we can't use SVG for some reason. It can handle pretty much any shape easily, but figuring out how to use SVG in the first place is a barrier to entry.)

What kind of triangle are you trying to make? This StackOverflow answer has some interesting magic, but it may or may not work for you depending on what you're trying to do.

 

I believe if you try and do it with Border and border radius, it might be possible.