CSS Art
one <div>
Simple rule: one <div> in the markup. The whole shape comes from CSS and ::before / ::after.
Open a card to see the preview and code.
Star
Three triangles: the div itself plus two rotated pseudo-elements.
Open ->Smiley
Face circle, eyes via box-shadow on ::before, smile on ::after.
Open ->Heart
A rotated square and two circles on the pseudo-elements.
Open ->Moon
Volume via inset box-shadow; craters are tiny pseudo-element dots.
Open ->Ghost
A friendly ghost with wavy hem made from radial gradients.
Open ->Rocket
Body, nose cone and launch flame - still just one div.
Open ->Ice cream
Scoop, highlight and a waffle cone via clip-path.
Open ->Pac
A conic-gradient mouth and food dots on ::after.
Open ->Cloud
Soft cloud from overlapping circles via box-shadow and pseudo-elements.
Open ->Diamond
Faceted gem built with rotated squares and clipped highlights.
Open ->Coffee
Cup body, handle and steam lines - one div only.
Open ->Tree
Layered triangle canopy with a tiny trunk shadow.
Open ->Umbrella
Canopy arc plus handle curve on the pseudo-elements.
Open ->Balloon
Round balloon, knot and a thin string line.
Open ->Fish
Body oval, eye and a triangular tail.
Open ->House
Square home with a roof triangle and a glowing window.
Open ->