Polygonal portraits of a lion, a girl, a scarecrow, and a tin woodman.

Drawing The Wizard of Oz characters in CSS

  • Cowardly Lion: mane, face, ears, and nose.
  • Dorothy: face, hair, dress, and hair bows.
  • Scarecrow: hat, face, necktie, and straw.
  • Tin Woodman: hat, face, jaw, and bowtie.
/* Cowardly Lion's mane */
.lion .mane {
background: var(--orange);
clip-path: polygon(
50% 5%, 73% 8%, 87% 40%, 85% 80%, 70% 95%,
65% 93%, 60% 98%, 55% 95%, 50% 100%, 45% 95%,
40% 98%, 35% 93%, 30% 95%, 15% 80%, 13% 40%, 27% 8%
);
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alvaro Montoro

Alvaro Montoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro