Terms & Conditions

Make a square with CSS? It's easy to just create an HTML element such as a div, then style it:

Done.

But what if we want responsive design results? So whatever the width, we don't need to declare it, we can set the height, and, we just need CSS, can we?

Yes, you can. In fact we can set what percentage of height by width. This time I will discuss it.

We start with a simple example. As you can see, the box is as high as wide. If you look at the CSS, there is no height declaration in px, em, vh, or other units.

The trick is to use a pseudo element or a block element in the container, then give padding-top or padding-bottom as a percentage.

You can try changing the width, even deleting it doesn't matter, meaning that the width will fit the container (because display: block;) and the height will still adjust to the width.

The width can be replaced by a percentage as well, no problem.

You can also change the percentage of padding, for example 50% means the height is half of the width, 200% means the height is twice the width and so on.