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
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
::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.
These days, you’re best bet for drawing shapes is either SVG or using a
clip-path in CSS, which is SVG-like (and can reference SVG). For example, look at these SVG icon sets, or this
clip-path editor. This article was written originally before either of these technologies really took hold!