Drawing a giraffe with CSS

  1. Drew the snout by doing an ellipse and adding some rotation.
  2. The head is a rotated oval.
  3. A pseudo-element of the snout made a circle for the nose, and added some shadows to duplicate it.
  4. For the mouth, we used another pseudo-element of the snout, we made it into an ellipse and use the bottom border for the line.
  5. The eyes are a rounded pseudo-element of the head and its shadow.
  6. Then for the hair, another pseudo-element of the head shaped like an ellipse and with an inset box-shadow.
  7. Both ears are a single element and its ::after by making them squares with opposite rounded corners.
  8. The horns were placed behind the head but in a position that makes them look like one is on top and the other one behind.
  9. A really tall rectangle made the neck.
  10. A similar rectangle made the mane, with a small rotation and cropping small triangles to make it irregular.
  11. Finally, for the dots in the neck, we use a neck pseudo-element and a bunch of box-shadows :)



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