CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. 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.
Shape | Style | ||
---|---|---|---|
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 |
|
Trapezoid |
|
||
Parallelogram |
|
||
Star (6-points) |
|
||
Star (5-points) |
|
||
Pentagon |
|
Hexagon |
|
||
Octagon |
|
||
Heart |
|
||
Infinity |
|
||
Diamond |
|
Diamond Shield |
|
||
Diamond Narrow |
|
||
Cut Diamond |
|
||
Egg |
|
||
Pac-Man |
|
Talk Bubble |
|
||
RSS Feed |
|
||
12 Point Burst |
|
||
8 Point Burst |
|
||
Yin Yang |
|
Badge Ribbon |
|
||
Space Invader |
|
||
TV Screen |
|
||
Chevron |
|
||
Magnifying Glass |
|
Facebook Icon |
|
||
Moon |
|
||
Flag |
|
||
Cone |
|
||
Rectangle |
|
||
Base |
|
||
Pointer |
|
Lock |
|