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 psuedo 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

Rectangle

Circle

Oval

Triangle Up

Triangle Down

Triangle Left

Triangle Right

Triangle Top Left

Triangle Top Right

Triangle Bottom Left

Triangle Bottom Right

Curved Tail Arrow via Ando Razafimandimby

Trapezoid

Parallelogram

Star (6-points)

Star (5-points) via Kit MacAllister

Pentagon

Hexagon

Octagon

Heart via Nicolas Gallagher

Infinity via Nicolas Gallagher

Diamond Square via Joseph Silber

Diamond Shield via Joseph Silber

Diamond Narrow via Joseph Silber

Cut Diamond via Alexander Futekov

Egg

Pac-Man

Talk Bubble

12 Point Burst via Alan Johnson

8 Point Burst via Alan Johnson

Yin Yang via Alexander Futekov

Badge Ribbon via Catalin Rosu

Space Invader via Vlad Zinculescu

TV Screen

Chevron via Anthony Ticknor

Magnifying Glass

Facebook Icon via Nathan Swartz

Moon via Omid Rasouli

Flag via Zoe Rooney

Cone via Omid Rasouli

Cross via Kaya Basharan

Base via Josh Rodgers

Pointer via Amsakanna Freethinker

Lock via Colin Bate

The post The Shapes of CSS appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2QoJLeG
via IFTTT