Drawing with CSS: shapes, layers and composition

Create simple illustrations with CSS using borders, pseudo-elements, gradients and transforms.

📘 Theory

Start with circles, triangles and capsules before composing larger scenes.

A circle is just a square box with `border-radius: 50%`.

The classic triangle comes from borders when the element has zero width and height.

Once those fundamentals feel natural, transforms and gradients let you create much richer shapes with surprisingly little code.

One HTML tag can still produce several visual parts.

`::before` and `::after` let you attach secondary shapes without creating more DOM nodes.

That makes them especially useful for decorative cards, badges, icons and playful interface accents.

Example Demo: planet icon Build a planet with a ring using one pseudo-element.

⌄

Challenge Challenge: minimal face with CSS Add eyes with `::before` and `::after`.

⌄

Test

Check your knowledge with a test about CSS.

Course resources 78