The Shapes of CSS

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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 SVG, using clip-path, or CSS Mask. For example, look at this CSS Shapes Collection, 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)