Hi folks 👋 Today, I wanted to share with you this cool CSS art I made as part of a spooky CSS Battle 👻:

This was not only a lot of fun, but really educational too.

• I found out that the head shape could be easily accomplished with a fancy border-radius, which I generated with this cool website. Basically, that shape is obtained with a:

border-radius: 15% 15% 100% 100% / 15% 15% 100% 100%;

• Also, the hair fringe was perfectly suitable for a clip-path. I used this other cool website in order to better visualize what I was clipping. I basically want a triangle, so I can obtain it with:

clip-path: polygon(100% 0, 0 0, 50% 100%);

• The mouth was also perfectly suitable for a clip-path, since it is essentially a semicircle:

clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);

📽️ If you enjoy these kind of things, here's a video of me speedrunning through the whole process 😉

Of course, as often happens in CSS, there are a lot of different ways we could accomplish the same results. Let me know if you would have done something differently in any way, I'm really curious! 😊