位于两个文本块之间的图像之外的形状

Question

我想在两个文本块之间有一个图像，并将所有这些都居中。图像应具有shape-outside 属性，允许文本以这样的圆形溢出它：

地点：

• 红块 = 文字
• 黑色圆圈 = 图片

我当前的代码使用flex 将整个事物居中，但事实证明shape-outside 无法使用。

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>

我怎样才能做到这一点？

Answer 1

shape-outside 只能与 float 元素一起使用，但是当使容器成为 flex 元素时，您设置的 float 属性将不再被考虑。

您可以考虑两个容器，每个容器中都有一个浮动元素，然后让两个圆圈重叠以创建只有一个的错觉：

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>

并用 CSS 变量使形状更容易调整：

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>