shape-outside of an image centered between two tex

Question

I'd like to have an image between two blocks of text, and have all of this centered. The image should have shape-outside property allowing the text to overflow it in a circular shape like this:

Where:

• red block = text
• black circle = image

My current code uses flex to center the entire thing, but it turns out shape-outside doesn't work with.

div{
  display:flex;
  flex-flow:row nowrap;
}
img{float:left;
shape-outside:circle(100px at 50%);
width:200px;height:200px;}
p{width:600px;}

<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
</p>
<img src="https://via.placeholder.com/200" >
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus enim ullam dolorum magnam deleniti quia quaerat vero aliquid fuga assumenda voluptatibus quis, quae molestias eligendi reiciendis quidem dignissimos, dolore, provident.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus enim ullam dolorum magnam deleniti quia quaerat vero aliquid fuga assumenda voluptatibus quis, quae molestias eligendi reiciendis quidem dignissimos, dolore, provident.Lorem ipsum dolor sit amet, consectetur adipisicing 
</p>
</div>

How could I achive that?

Answer 1

shape-outside can only be used with float element but when making the container a flex one the float property you set will no more be considered.

You can consider two container where you will have a float element in each one and you make both circle overlap to create the illusion of only one:

div.box {
  font-size: 0;
  max-width: 600px;
}

div.box p {
  width: 50%;
  display: inline-block;
  font-size: initial;
  vertical-align: top;
  text-align: justify;
}

div.box p:before {
  content: "";
  width: 75px; /*half the height*/
  height: 150px;
  margin-top: 30px; 
  background-image: url(https://picsum.photos/300/300?image=1069);
  background-size:150px 150px;
}

div.box p:first-child:before {
  float: right;
  shape-outside: circle(55% at right calc(50% + 15px));
  background-position:left;
  border-radius: 150px 0 0 150px;
}

div.box p:last-child:before {
  float: left;
  shape-outside: circle(55% at left calc(50% + 15px));
  background-position:right;
  border-radius: 0 150px 150px 0;
}

<div class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>

</div>

And with CSS variable to make the shape easier to adjust:

div.box {
  font-size: 0;
  max-width: 600px;
  --R:75px; /* radius */
}

div.box p {
  width: 50%;
  display: inline-block;
  font-size: initial;
  vertical-align: top;
  text-align: justify;
}

div.box p:before {
  content: "";
  width: var(--R);
  height: calc(2*var(--R));
  margin-top: 30px; 
  background-image: url(https://picsum.photos/300/300?image=1069);
  background-size:calc(2*var(--R)) calc(2*var(--R));
}

div.box p:first-child:before {
  float: right;
  shape-outside: circle(55% at right calc(50% + 15px));
  background-position:left;
  border-radius: calc(2*var(--R)) 0 0 calc(2*var(--R));
}

div.box p:last-child:before {
  float: left;
  shape-outside: circle(55% at left calc(50% + 15px));
  background-position:right;
  border-radius: 0 calc(2*var(--R)) calc(2*var(--R)) 0;
}

<div class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>

</div>

<div class="box" style="--R:20px;">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>

</div>

<div class="box" style="--R:100px;">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.
  </p>

</div>