CSS shapes

I've been following the CSS in-depth course by
Estelle Weyl
on Frontend Masters
to learn much of this stuff. I recommend you go check out her work. The slides
she use while teaching comes with a bunch of examples and playgrounds and
are available on her website.

CSS shapes

Polygon shape-outside

This is an example of an image with a shape-outside. The image is already
transparent so I don't need to clip it as well. The effect really only
comes into play if there is enough text to wrap around some of the shapes,
so here is a little bit more text. The image is one I drew as an exercise
in using the Apple Pencil in Pixelmator. I wrote a few words on it on the
ol' blog.

One fun thing to note is that shape-outside can be animated!
I have a separate lab with CSS animations,
so head over there to see an example.

Your browser devtools likely have a WYSIWYG shapes editor that helps make
the correct polygon function. Add a basic polygon yourself and then click
the shapes editor to get started. Below is how it looks in Firefox 68.