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!

10 Replies to “Making Responsive Rectangles and Squares with CSS”

  1. I am very new at coding. I have placed text on a rectangle using this code and it worked wonderfully. I want another one on the same page without it having the same copy. How do I label each to have their own copy?

    1. I’m glad to hear that this code worked for you! Since the code samples in this post are using classes, you can include more than one rectangle or square on a page. So, if I’m understanding what you’ve got correctly, you could replicate the HTML that you have and then change the text in one of them. I’m hoping this helps, but if you’ve still got questions, feel free to post a link to what you’ve got.

  2. Responsive Square

    .flex-square{
    width: 40%;
    background: #ca0164;
    font-size: 200%;
    }
    .flex-square:before{
    content: “”;
    display: block;
    padding-top: 100%;
    }

    #txt {
    padding: 10% 10% 10% 10%;
    }

    Hello, how do I get this text to start at the top?

    1. It seems like you’ve extended the code past the examples in this post – do you have a JSFiddle or Codepen that you could share that includes the HTML as well as the CSS of what you’re trying to do?

  3. I need a 3*3 rectangular matrix structure. Means nine rectangular boxes with spaces between them forming a matrix structure. The width can be 200 px and height 100. If you could help in this , it would be highly appreciated.

    Regards,
    Subhajit

  4. Great explanation to come across as I’m digging into learning this stuff, at the moment. Can you explain a little more as to why use the 2 part control vs setting relative height/widths in the class directly? Such as:

    #simple-square {
    display: block;
    width: 15.7vmax;
    height: 15.7vmax;
    background: blue;
    }
    gives me same, *apparent* behavior as changing the responsive square example above to use the same units (vmax instead of %, in this case), but maintains the aspect ratio better when you get to the narrowest width of the window. I expect that the answer most likely falls into the category of ease of maintenance and/or reuse, but would like to hear.

Leave a Reply

Your email address will not be published. Required fields are marked *