The Shapes of CSS

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