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

 

引：https://css-tricks.com/examples/ShapesOfCSS/