Carl The CSS Pig
Guess what? I am going to be completely unoriginal here and admit that I think CSS positioning is a total pain to get the hang of. I assume tears and blood have been shed over this topic for years and years. Or maybe it's just my tears and blood being shed. Either way, I feel like it should be discussed.
I set out to create an illustration, of sorts, using HTML and CSS to practice positioning. I chose a pig, obviously, and ran into the following challenges which I needed to investigate further: image rotation, creating a CSS triangle, and absolute vs. relative positioning. Also, his name is Carl.
All the shapes were created by styling divs. I placed all the divs within a main div, being the Carl's head. I positioned his head relatively, and all other parts absolutely. I found this article helpful as a general overview of the issue.
I had to learn how to create triangles using CSS in order for Carl to have ears. CSS Tricks provides a useful article on this. Assuming your div has a class of "arrow-up", your CSS would look like this:
In order to manipulate Carl's ears I needed to rotate the second one that I created to mirror the original. While they should have the same class, the second ear with need an additional class in order to select it separately for this alteration. I found this to be helpful concerning rotation, and below is the CSS:
While I plan to keep going with this, I needed a break for the day. Creating life is hard work.
View this little guy on CodePen.