The Shapes of CSS

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.

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, this clip-path editor, and this introduction to CSS clipping. This article was written originally before either of these technologies really took hold!

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 / alt)

Lock Shape

Reverse Corners (via Zberno)