CSS Art

Every CSS illustration starts with a few basic shapes. Here’s how to build a dozen of them, one property at a time.

Creative Coding

CSS Shapes

· 6 min readCSS, Illustration
Every shape here is a single div. Pick one to see how it’s made.

Circle

Every circle in CSS starts as a square. Round each corner by half its width with border-radius: 50%, and the curves meet in the middle.

Step by step
  1. 1A squarewidth = height
  2. 2Round the cornersborder-radius: 25%
  3. 3All the wayborder-radius: 50%
The CSS
.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #F472B6;
}

Square

The simplest shape, and the starting point for most of the others: a div with the same width and height, plus a background so you can see it.

Step by step
  1. 1An empty divno size yet
  2. 2Give it a sizewidth + height
  3. 3Fill it inbackground
The CSS
.square {
  width: 100px;
  height: 100px;
  background: #57BC92;
}

Triangle

There’s no triangle property in CSS, so we borrow one from borders. Shrink a box to zero, give it thick borders, and each border becomes a triangle. Then hide the ones you don’t need.

Step by step
  1. 1Four thick borderswidth: 0; height: 0
  2. 2Drop the topno border-top
  3. 3Hide the sidestransparent
Anatomy
  • border-top
  • border-right
  • border-bottom (the triangle)
  • border-left
The CSS
.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid #7F9BE6;
}

Pentagon

A pentagon is two shapes stacked: a trapezoid body made from a thick top border, and a triangle roof added with ::before.

Step by step
  1. 1A trapezoid bodyborder-top + clear sides
  2. 2A triangle roof::before
  3. 3Stack themposition: absolute
Anatomy
  • the div: a trapezoid
  • ::before: a triangle on top
The CSS
.pentagon {
  position: relative;
  width: 54px;
  border-style: solid;
  border-width: 50px 18px 0;
  border-color: #F5BF46 transparent;
}

.pentagon::before {
  content: "";
  position: absolute;
  top: -85px;
  left: -18px;
  border-style: solid;
  border-width: 0 45px 35px;
  border-color: transparent transparent #F5BF46;
}

Oval

An oval is a stretched circle. Use the same border-radius: 50%, but on a box that’s taller than it is wide.

Step by step
  1. 1A tall rectanglewidth < height
  2. 2Round the cornersborder-radius: 25%
  3. 3All the wayborder-radius: 50%
The CSS
.oval {
  width: 70px;
  height: 120px;
  border-radius: 50%;
  background: #FE7043;
}

Trapezoid

A trapezoid uses the triangle’s border trick on a box that still has some width. The bottom border keeps a flat top, and the transparent sides slant it in.

Step by step
  1. 1Three bordersheight: 0
  2. 2Hide the sidestransparent
Anatomy
  • border-bottom (the trapezoid)
  • border-left
  • border-right
The CSS
.trapezoid {
  width: 80px;
  height: 0;
  border-bottom: 70px solid #2BA3A0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

Octagon

Start with a square, then cover its four corners with small triangles the same color as the background. The corners disappear, leaving eight sides.

Step by step
  1. 1A squarethe div
  2. 2Paint the corners::before + ::after
  3. 3Match the backgroundcorners disappear
Anatomy
  • the div: a square
  • corner wedges, painted the background color
The CSS
.octagon {
  position: relative;
  width: 100px;
  height: 100px;
  background: #B985EB;
}

.octagon::before,
.octagon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;  /* 100px minus the two 29px borders */
  border-left: 29px solid #C4EBD7;  /* background color */
  border-right: 29px solid #C4EBD7;
}

.octagon::before {
  top: 0;
  border-bottom: 29px solid #B985EB;
}

.octagon::after {
  bottom: 0;
  border-top: 29px solid #B985EB;
}

Parallelogram

Draw a rectangle, then lean it over with transform: skew(). The top and bottom stay level while the sides tilt.

Step by step
  1. 1A rectanglethe div
  2. 2Lean it overtransform: skew(20deg)
The CSS
.parallelogram {
  width: 120px;
  height: 70px;
  background: #5088EA;
  transform: skew(20deg);
}

Rectangle

A square with one side stretched: any width and height that don’t match.

Step by step
  1. 1A squarewidth = height
  2. 2Stretch one sidewidth ≠ height
The CSS
.rectangle {
  width: 70px;
  height: 120px;
  background: #2D6144;
}

Hexagon

A hexagon is a wide rectangle with a triangle on top and another underneath, added with ::before and ::after.

Step by step
  1. 1A wide rectanglethe div
  2. 2A triangle on top::before
  3. 3And one below::after
Anatomy
  • the div: a rectangle
  • ::before: triangle on top
  • ::after: triangle below
The CSS
.hexagon {
  position: relative;
  width: 104px;
  height: 60px;
  background: #D91F1F;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  left: 0;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
}

.hexagon::before {
  bottom: 100%;
  border-bottom: 30px solid #D91F1F;
}

.hexagon::after {
  top: 100%;
  border-top: 30px solid #D91F1F;
}

Star

The classic CSS star is three triangles: one wide triangle, rotated; a mirrored twin from ::after; and a tall point on top from ::before.

Step by step
  1. 1One wide trianglerotate(35deg)
  2. 2A mirror twin::after
  3. 3A point on top::before
Anatomy
  • the div: a wide triangle
  • ::after: its mirror
  • ::before: the top point
The CSS
.star {
  position: relative;
  width: 0;
  height: 0;
  margin: 50px 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #8B87F5;
  transform: rotate(35deg);
}

.star::before {
  content: "";
  position: absolute;
  top: -45px;
  left: -65px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 80px solid #8B87F5;
  transform: rotate(-35deg);
}

.star::after {
  content: "";
  position: absolute;
  top: 3px;
  left: -105px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #8B87F5;
  transform: rotate(-70deg);
}

Heart

Tilt a square 45 degrees so it points down, then add a circle to each top edge with ::before and ::after.

Step by step
  1. 1A tilted squarerotate(-45deg)
  2. 2Add a circle::before
  3. 3Add another::after
Anatomy
  • the div: a tilted square
  • ::before: a circle
  • ::after: a circle
The CSS
.heart {
  position: relative;
  width: 60px;
  height: 60px;
  background: #6F1B31;
  transform: rotate(-45deg);
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #6F1B31;
}

.heart::before {
  top: -30px;
  left: 0;
}

.heart::after {
  top: 0;
  left: 30px;
}
Back to topNext · Drawing with Code