The Wide World of CSS Shapes

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.

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!

--

--

--

Software Engineering Student

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Design as Citizenship: Part 2

17 Year Old January 2005 Vintage Retro 17th Birthday Gift T Shirt

Collaborations | F4 chair with Stylex

To Build a Podcast

Sketchnotes: Writing Precise Rules and Game Balance

Iron Hack Pre-work — Challenge 1: Design Thinking

Front-End Design, Mehis Kont

Feedback in daily communication & design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alexandra Radevich

Alexandra Radevich

Software Engineering Student

More from Medium

The Enigmatic Modal

Moodle H5P Styling (CSS)

How to compile SASS into CSS and watch for changes?

First Blog Post