css - 在两个文本 block 之间居中的图像外部形状

Question

我想在两个文本 block 之间放一张图片，并让所有这些都居中。图像应具有 shape-outside 属性，允许文本以圆形溢出图像，如下所示:

地点:

• 红色 block =文本
• 黑色圆圈 = 图片

我当前的代码使用 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 属性将不再被考虑。

您可以考虑两个容器，每个容器中都有一个 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>