The Wide World of CSS Shapes

5 min readJan 20, 2021

CSS can be surprisingly expressive, and not everyone is aware of the possibilities that the box-model provides. Despite its name, the box-model allows us to create a variety of geometric shapes. Whether you use this guide to improve your CSS art, or to spruce up the UI of a web app, is up to you.

You can follow along by taking a look at this CodePen:

Tools

Generators

There are a variety of generators that can be used to assist in creating shapes with CSS, here are a few that I think are helpful:

Fancy Border Radius Generator: This generates more complex (8 value) border radii. I personally didn’t even know this many radius options existed before this generator.
Clip Path Generator (Clippy): The clip-path property clips off part of an element, allowing it to show up as a different shape. Clippy writes the clip-path for you, with a visual interface.
CSS Triangle Generator: As the name implies, this makes generating triangles with CSS (not using clip-path) much easier by providing a visual interface.

You can obviously feel free to write these by hand, but the generators can be a time-saver.

CSS Selectors and Properties

These are concepts to keep in mind, that make creating shapes with CSS easier.

::before/::after
border properties: border-color, border-radius
box-shadow
z-index

The basics

These are the simplest shapes, and the ones people are more likely to be comfortable with. All the more complicated shapes build upon these:

**I’m putting my height/width in px here, but they are in % in the CodePen example. Either one is fine, however, keep in mind that the CodePen example uses absolute positioning — if you’re confused by that, stick to exact units like px or rem.**

Rectangle — created by setting an uneven height, width, and background-color on a block element.

.rectangle {
  width: 120px;
  height: 80px;
  background: #ffd5cd;
}

Square — setting equal height and width.

.square {
  width: 100px;
  height: 100px;
  background: #efbbcf;
}

Circle — same as a square, with 50% border-radius.

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #c3aed6;
}

Ellipse — (or oval) same as a rectangle, with 50% border-radius:

.ellipse {
  width: 120px;
  height: 80px;
  border-radius: 50%;
  background: #ffd5cd;
}

Commonly used shapes

Now that you’re comfortable with your arsenal of basic shapes, you might be wondering how to create shapes that are, well, cooler.

Triangle (without clip-path) — a triangle shape is achieved by setting the height and width to 0, and manipulating the element border.

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 60px 100px 60px;
  border-color: transparent transparent #efbbcf transparent;
}

Triangle (with clip-path) — with clip-path, we clip away the sides of a square or rectangle to get a triangle.

.triangle-clip {
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #c3aed6;
}

Heart — a heart layers a rotated square and two circles.

.heart {
  position: relative;
  background: #ffd5cd;
  height: 100px;
  width: 100px;
  transform: rotate(-45deg);
  margin: 3rem;
}.heart:before,
.heart:after {
  content: "";
  position: absolute;
  background-color: #ffd5cd;
  border-radius: 50%;
  height: 100%;
  width: 100%;
}.heart:before {
  left: 0;
  top: -50%;
}.heart:after {
  left: 50%;
}

Crescent — a crescent achieves its shape by adding a solid box-shadow to a circle. Another option is to layer two circles.

.crescent {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 20px 20px 0 0 #efbbcf;
}

Star — made by using clip-path, can also be created by manipulating borders (check out additional resources at the end of this article).

.star {
  width: 100px;
  height: 100px;
  left: 20%;
  top: 23%;
  background: #c3aed6;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

More clip-path shapes

These are all squares, with different clip-path values.

Trapezoid

clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

Parallelogram

clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

Pentagon

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

Hexagon

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Be sure to take a look at Clippy for even more shapes.

Other Cool Shapes

Curved line — a curved line, with consistent height through-out (as opposed to creating a line with border-top), is created by setting all but one border-color of a round element to transparent.

.curved-line {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: transparent;
  border: 6px solid;
  border-color: #efbbcf transparent transparent transparent;
}

Leaf — this is a fun one that manipulates border-radius to create a leaf-like shape.

.leaf {
  width: 100px;
  height: 100px;
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  background: #c3aed6;
}

Blobs — more border-radius fun! Many unique blob shapes can be created by playing around with border-radius.

.blob {
  width: 100px;
  height: 100px;
  border-radius: 46% 54% 64% 36% / 61% 44% 56% 39%;
  background: #ffd5cd;
}

That’s all for now, but please check out the additional resources below for even more CSS shape possibilities. And if you’re interested, take a look at my CSS art!