All workCSS art · 2021 · Complete
Shapes with CSS
Twenty-six shapes, from a circle to a magnifying glass, in pure CSS.
Shapes
26
Made with
Pure CSS
What I set out to do
I built this alongside Letters with CSS in 2021, while teaching myself CSS properly. Where the letters were about combining shapes, this project was about getting each shape right on its own, as simply as possible.
What I built
A gallery of 26 shapes drawn with styling alone, with no images or SVG.
- Circles and curves: circle, quarter and three-quarter circles, semicircles, oval, egg, and pill.
- Triangles and polygons: three kinds of triangle, square, rectangle, parallelogram, trapezoids, rhombus, kite, pentagon, and pyramid.
- Figures: star, crescent, horseshoe, plus sign, heart, and magnifying glass.
Triangles come from the edges of an empty box, and figures like the heart and star are built from more than one piece.
Where it is now
Complete. All 26 shapes are drawn, and each one's HTML and CSS can be viewed and copied on the live site, shown below.