I recreated an Angry Bird in CSS as an experiment to learn more front end styling. It has been tested on recent versions of Chrome and Firefox, but cross-browser compatibility wasn’t really the goal – I wanted to try drawing shapes and learn more about CSS transformations.
The code is on github, and you can preview the output here.
Learnings:
- Any kind of non-standard shapes are difficult! Particularly curves and the border-radius property, which has a slightly confusing syntax.
- Triangles can’t have borders easily 😦
- This.