Starsi "webowcy" zapewne pamiętają czasy używania float. Właściwość ta była używana do praktycznie wszystkiego, od pozycjonowania grafik w tekście "oblewanie grafiki tekstem" czy przez ustawianie divów. W tamtym czasie nie było czegoś takiego jak flex czy grid. Wszędzie wstawiało się clearfix ale nie o tym mowa.
shape-outside ma kilka bardzo interesujących wartości funkcji:
shape-outside: circle(50%);
shape-outside: ellipse(140px 110px at 45% 47.68%);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: url(image.png);
...Więcej funkcji zobacz na developer.mozilla.org
Wszystkie testy i pogląd najlepiej robić w firefoxie, tam można w devtools modyfikować wygląd ścieżki nie tak jak chrom zgadywać ;). Pierwsze zdjęcie z artykułu pokazuje właśnie ścieżkę z właściwości polygon w firefox. Modyfikacja polega na dodawaniu/usuwaniu oraz przeciąganiu punktów.
1. Float
Niestety stwarza pewien problem, poniżej jak to wygląda jeżeli jest zbyt mało tekstu: 
Kiedyś byśmy skorzystali z clearfix i innych "wynalazków", obecnie robimy to za pomocą "display: flow-root;" które to dodajmy do elementu nadrzędnego w tym przypadku do article. Tak naprawdę float wykorzystujemy bardzo sporadycznie, jedynie do pozycjonowania obrazków w tekście, a to zdarza mi się raz na rok 😉
2. Circle
Nic szczególnego, podajemy w procentach promień, możemy zmienić środek względem obrazka - shape-outside: circle(46.82% at center center);
3. Ellipse
Tak samo jak circle nic szczególnego mamy o jedne punkt więcej czyli 3 punkty, środek, promień oraz dodatkowy punkt który tworzy nam elipsę - shape-outside: ellipse(140px 110px at 45% 47.68%);
4. Polygon
Ta właściwość jest bardziej intersująca, bo punktów na ścieżce możemy ustawić wiele, a także je usuwać. Bardzo przydaje się do skomplikowanych kształtów - shape-outside: polygon(76.66% 28px, 112.59% 25.28%, 80.48% 33.6%, 97.36% 58.85%, 74.96% 87.69%, 6.98% 101.83%, 1px 50%, 2.76% 7.07%);
5. Url
Chyba najbardziej interesująca właściwość. Do url shape-outside: url(image.png); należy dodać ten sam obrazek co w html. Obrazek musi być transparentny, wtedy przeglądarka zachowuje się jak polygon ale sama na podstawie transparentności odczytuje ścieżkę i ustawia tekst.
Poniżej przykład zachowania się poszczególnych właściwości.
See the Pen
shape-outside by Greg (@Tomik23)
on CodePen.
* Niestety ale w wersji URL występuje CORS i trzeba to obsłużyć, a że codepen nie posiadam wersji pro to nie dodam lokalnie pliku i przykład url nie działa.
Co do kompatybilności z przeglądarkami to oczywiście nie działa w IE11 ale kto by się przejmował 😉