Making Responsive Rectangles and Squares with CSS

The basic conceptual and literal building block of most responsive CSS shapes is the rectangle. In terms of geometry, a rectangle is a parallelogram where each corner is a right angle. This means that once you know how to make a responsive CSS rectangle, you’ll automatically know how to make a responsive CSS square. Always remember: squares are just rectangles where all of the sides are the same length.

Non-Responsive Rectangles

It is really easy to make a non-responsive rectangle using a single div and a just a smidgen of CSS. If you squish your browser window you’ll see that this rectangle has a fixed width and height.

HTML

<div class="fixed-rectangle"></div>

CSS

div.fixed-rectangle {
     width: 400px;
     height: 100px;
     background-color: #ca0164;
}

To make this fixed size rectangle all we need to do is apply a width and height to the .fixed-rectangle class we are using to identify the div. I added a background color so that you can see the rectangle, but remember that background colors aren’t required to actually create the shape itself.

If you were to change the width and height in the CSS for this fixed-size rectangle to percentages, your code wouldn’t work and nothing would render. The reason this will not work is because percentage height is always calculated based on the height of the element and in this case, the height of the element would always be zero. How then can one make a responsive rectangle?

Responsive Rectangles

The key to making a truly responsive rectangle is vertical padding, either padding-bottom or padding-top will work. Why, you might ask? Vertical padding is calculated on the basis of the width of the element. Therefore, when using vertical padding in combination with a percentage width one can maintain an aspect ratio across widths, which is what truly defines a responsive rectangle.

There are a few different ways of making responsive rectangles, but the below code demonstrates my favorite basic method. This code can be extended to incorporate a number of other things, including text.

HTML

<div class="flex-rectangle"></div>

CSS

.flex-rectangle{
    width: 100%;
    background: #ca0164;
}
.flex-rectangle:before{
    content: "";
    display: block;
    padding-top: 25%;
}

So how does this work? The width of the rectangle is established through a percentage width on the selector. I’ve added a background color here as well so that you can actually see the rectangle. Again, a background color is not required for the element to render.

I’ve used the pseudo-selector :before to add the padding to the element. In order for anything to render, the pseudo-selector needs the content property to be included, though you don’t need to (and shouldn’t) include any actual content. The pseudo-selector also needs to be displayed as a block element.

The padding-top property is what governs the height and aspect ratio of the rectangle. Remember that this value is calculated based on the width of the element. In this case I wanted the rectangle to have a 4:1 aspect ratio to match our fixed size example. Therefore, I needed to set the vertical height to a quarter of the width of the element, which is 25% in this case. If the width of the rectangle was set to 80% we’d need to set padding-top to 20% in order to achieve the same 4:1 aspect ratio.

Responsive Squares

Now that we’ve walked through a responsive rectangle, making a responsive square should be easy. All we need to do is make a responsive rectangle with a 1:1 aspect ratio.

HTML

<div class="flex-square"></div>

CSS

.flex-square{
    width: 30%;
    background: #ca0164;
}
.flex-square:before{
    content: "";
    display: block;
    padding-top: 100%;
}

The width of our square is set to 30% and padding-top is set to 100% on the pseudo-element. We have a 1:1 aspect ratio and therefore a square because the height is set to 100% of the width.

Browser Support

This method will work in all modern browsers and in Internet Explorer 9 and above. Remember, Internet Explorer 8 did not support responsive design without some serious hackery, so it makes total sense that responsive shapes would be a no-go in IE8!