Creating a Rectangle with just CSS

Published on December 30, 2024 · Tagged with shapes-with-css art

Continuing with our series on creating shapes with CSS, this blog post will take you through different approaches to create a Rectangle using CSS!

1. Width & Height: The Classic Approach #

The most straightforward way to create a rectangle is by setting width and height properties on a block element (eg. <div>).

.element {
  width: 200px;
  height: 100px;
  background-color: #007BFF;
}

And as you might guess, setting width and height to the same value will create a square.

.element {
  width: 150px;
  height: 150px;
  background-color: #007BFF;
}

2. Using `clip-path` #

The clip-path property lets you clip an element into various shapes. One of the available values is xywh().

html { background-color: royalblue; }
body {
  background-color: orange;
  clip-path: xywh(0 5px 100px 75px);

}

In fact, you can give rounded corners to the rectangle by setting the round value.

html { background-color: royalblue; }
body {
  background-color: orange;
  clip-path: xywh(60px 60px 100px 75px round 10px);

}

We have another value for clip-path - polygon() that can be used to clip any element into a rectangle, like so:

html { background-color: royalblue; }
body {
  background-color: orange;
  clip-path: polygon(60px 60px, 160px 60px, 160px 135px, 60px 135px);
}

3. Using `linear-gradient` #

The linear-gradient property lets you create a gradient from one color to another (or more). It's not straightforward how a linear gradient can create a rectangle, but here is something that will help you visualize it.

We are trying to create an orange rectangle with a blue background. First let's give a linear gradient to our <body> which goes from blue to orange to blue again, all with hard stops (crisp edges).

body {
  background-image: linear-gradient(0deg, royalblue 33%, orange 0, orange 66%, royalblue 0);
}

This might look like a rectangle, but that is just a band of color spanning 100% of the body's width. Now let's have a look at another linear gradient, similar to the previous one, but perpendicular to it and middle color as transparent.

body {
  background-image: linear-gradient(90deg, royalblue 33%, transparent 0, transparent 66%, royalblue 0);
}

Now remember that an element's background layer can have multiple background-image layers and hence, multiple gradients. Let's superimpose our 2nd gradient on top of the first one.

body {
  background-image: linear-gradient(90deg, royalblue 33%, transparent 0, transparent 66%, royalblue 0),
    linear-gradient(0deg, royalblue 33%, orange 0, orange 66%, royalblue 0);
}

The bottom gradient sets the height of the rectangle and the top one sets the width. Few things to note about this method:

The method always gives a background color behind the rectangle.
Adjusting the width/height of the rectangle is not straightforward and requires tweaking the gradients color-stops.

Bonus: Code-golf techniques #

When it comes to code-golfing, there are all sorts of weird ways to create shapes. One way to create a rectangle is to use the unicode character - "◼". And then to adjust its dimensions, we can use the font-size or scale property.

<div>◼</div>
<style>
  div {
    color: orange;
    font-size: 10rem;
  }
</style>

<div>◼</div>
<style>
  div {
    transform-origin: top left;
    color: limegreen;
    scale: 8 4;
  }
</style>

Those are the different ways to create rectangles with CSS! Hope you enjoyed some CSS art. I'll see you in the next article of the "Shapes with CSS" series.

1. Width & Height: The Classic Approach #

2. Using clip-path #

3. Using linear-gradient #

Bonus: Code-golf techniques #

2. Using `clip-path` #

3. Using `linear-gradient` #