Took me a long time, but yes. It's effectively the same idea as yours but uses zero width containers to push down the shapes.
.pusher {
display: block;
width: 0px;
height: 100px; /* top pos of img */
}
#left .pusher { float: right; }
#right .pusher { float: left; }
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
margin: 0;
padding: 0;
}
.circle {
display: block;
width: 100px; /* half width of img */
height: 200px; /* height of img */
}
#left .circle {
float: right;
clear: right;
-webkit-shape-outside: rectangle(
0px,
0,
200px, /* width of img */
200px, /* height of img */
50%,
50%
);
}
#right .circle {
float: left;
clear: left;
-webkit-shape-outside: rectangle(
-100px, /* 0 - width of img */
0,
200px, /* width of img */
200px, /* height of img */
50%,
50%
);
}
p {
float: left;
width: 50%;
overflow: hidden;
text-align: center;
}
img {
position: absolute;
top: 100px;
left: 50%;
margin-left: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
<img src="https://placehold.it/200x200" />
<p id="left">
<span class="pusher"></span>
<span class="circle"></span>
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philospher Cicero. It's words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder
</p>
<p id="right">
<span class="pusher"></span>
<span class="circle"></span>
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philospher Cicero. It's words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder
</p>