De Former av CSS

0
16

CSS kan göra alla möjliga former. Kvadrater och rektanglar är lätt, eftersom de är naturliga former av webben. Lägg till en bredd och höjd, och du har den exakta storleken rektangel som du behöver. Lägg till border-radius och du kan runda formen, och nog av det så kan du stänga av dem rektanglar i cirklar och ovaler.

Vi får också ::före och ::after pseudo-element i CSS, vilket ger oss möjligheten av två former som vi kan lägga till den ursprungliga delen. Genom att få smart med positionering, omvandla, och många andra knep, vi kan göra massor av former i CSS med bara en enda HTML-element.

Torget

Rektangel

Cirkeln

Oval

Triangeln Upp

Triangeln Ner

Triangel Kvar

Triangeln Till Höger

Triangeln Uppe Till Vänster

Triangeln Överst Till Höger

Triangeln Längst Ned Till Vänster

Triangeln Längst Ned Till Höger

Böjd Svans Pilen via Ando Razafimandimby

Trapezoid

Parallelogram

Star (6 poäng)

Star (5-poäng) via Kit springfield fick två riktnummer

Pentagon

Hexagon

Octagon

Hjärtat via Nicolas Gallagher

Infinity via Nicolas Gallagher

Diamond Square via Joseph Silver

Diamond Sköld via Joseph Silver

Diamond Smala via Joseph Silver

Cut Diamond via Alexander Futekov

Ägg

Pac-Man

Prata Bubbla

12 Punkt Brast via Alan Johnson

8 Punkten Brast via Alan Johnson

Yin Yang via Alexander Futekov

Badge Band via Catalin Rosu

Space Invader via Vlad Zinculescu

TV-Skärmen

Chevron via Anthony Ticknor

Förstoringsglas

Ikonen via Nathan Swartz

Månen via Omid Rasouli

Flagga via Zoe Rooney

Kon via Omid Rasouli

Cross via Kaya Basharan

Bas via Josh Rodgers

Pekaren via Amsakanna Freethinker

Lås via Colin Bate