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:
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.
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
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
- Rectangle — created by setting an uneven
background-coloron a block element.
- Square — setting equal
- Circle — same as a square, with 50%
- Ellipse — (or oval) same as a rectangle, with 50%
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
widthto 0, and manipulating the element
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.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
- Heart — a heart layers a rotated square and two circles.
- Crescent — a crescent achieves its shape by adding a solid
box-shadowto a circle. Another option is to layer two circles.
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).
More clip-path shapes
These are all squares, with different
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
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-colorof a round element to transparent.
border: 6px solid;
border-color: #efbbcf transparent transparent transparent;
- Leaf — this is a fun one that manipulates
border-radiusto create a leaf-like shape.
border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
- Blobs — more
border-radiusfun! Many unique blob shapes can be created by playing around with
border-radius: 46% 54% 64% 36% / 61% 44% 56% 39%;
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!