Share:
Shape-outside is a revelatory addition to CSS, allowing designers to creatively bend text around shapes and since Firefox version 62 it enjoys over 80% browser support. There are several excellent resources on applying shape-outside but not that many articles demo the ability to use transparent PNGs. I was having trouble getting it to work initially, but there’s a couple of reasons why the effect might not show. Here are some tips:
- Did you check that your element has width/height set?
- Did you apply float to the element?
- Did you double check that the PNG you are using uses transparency?
- Is your PNG much larger than than the element itself?
If the effect still isn’t showing, maybe there is an issue with how the PNG is being fetched. Try replacing the url with a data URI instead and see if that makes a difference. If it now works, there is an issue fetching the PNG from your image url. For that see the notes on CORS and Shape-outside urls on MDSN.