Shapes of CSS

The Shapes of CSS

All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser.

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 Square

Diamond Shield

Diamond Narrow

Cut Diamond

Egg

Pac-Man

Talk Bubble

12 Point Burst

8 Point Burst

Yin Yang

Badge Ribbon

Space Invader

TV Screen

Chevron

Magnifying Glass

Facebook Icon

Moon

Flag

Conevia

Cross

Base

#base { background: red; display: inline-block; height: 55px; margin-left: 20px; margin-top: 55px; position: relative; width: 100px; } #base:before { border-bottom: 35px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -35px; width: 0; }

Kindly Click On The Share Button Above To Share With Your Friends And Do Not Forget To Drop Your Comment(s).Thanks!
EmoticonEmoticon