CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.

We also get the ::before and ::after pseudo-elements in CSS, which give us the potential of two more shapes we can add to the original element. By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element.

Square Shape

Rectangle Shape

Circle Shape

Oval Shape

Triangle Up Shape

Triangle Down Shape

Triangle Left Shape

Triangle Right Shape

Triangle Top Left Shape

Triangle Top Right Shape

Triangle Bottom Left Shape

Triangle Bottom Right Shape

Curved Tail Arrow Shape via Ando Razafimandimby

Trapezoid Shape

Parallelogram Shape

Star (6-points) Shape

Pentagon Shape

Octagon Shape

Cut Diamond Shape via Alexander Futekov

Egg Shape

Pac-Man Shape

Talk Bubble Shape

12 Point Burst Shape via Alan Johnson

8 Point Burst Shape via Alan Johnson

TV Screen Shape

Magnifying Glass Shape