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
Star (5-points) Shape via Kit MacAllister
Pentagon Shape
Hexagon Shape via Aaron Hanson
Octagon Shape
Heart Shape via Nicolas Gallagher
Infinity Shape via Nicolas Gallagher
Diamond Square Shape via Joseph Silber
Diamond Shield Shape via Joseph Silber
Diamond Narrow Shape via Joseph Silber
Cut Diamond Shape via Alexander Futekov
Egg Shape
Pac-Man Shape
Talk Bubble Shape
RSS Feed Shape via Kevin Huff
12 Point Burst Shape via Alan Johnson
8 Point Burst Shape via Alan Johnson
Yin Yang Shape via Alexander Futekov
Badge Ribbon Shape via Catalin Rosu
Space Invader Shape via Vlad Zinculescu
TV Screen Shape
Chevron Shape via Anthony Ticknor
Magnifying Glass Shape
Facebook Icon Shape via Nathan Swartz
Moon Shape via Omid Rasouli
Flag Shape via Zoe Rooney
Cone Shape via Omid Rasouli
Cross Shape via Kaya Basharan
Base via Josh Rodgers
Pointer via Amsakanna Freethinker
Lock Shape