Skip to main content
Home / Articles /

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