html

<div class="container">
  <div class="circle"></div>
  <p>
    テキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込み
  </p>
</div>
<div class="container">
  <div class="triangle"></div>
  <p>
    テキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込み
  </p>
</div>
<div class="container">
  <div class="polygon"></div>
  <p>
    テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み テキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込みテキストを複雑なpolygon状に回り込み
  </p>
</div>
<div class="container">
  <img src="assets/images/drop.png" alt="" class="image" width="200">
  <p>
    テキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込みテキストを画像状に回り込み
  </p>
</div>

scss

.container {
  margin-top: 40px;
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}
.circle {
  width: 200px;
  aspect-ratio: 1/1;
  background-color: green;
  float: left;
  shape-outside: circle(); // floatを円形に回り込ませる
  border-radius: 50%;
}

.triangle {
  width: 200px;
  aspect-ratio: 1/1;
  background-color: green;
  float: left;
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.polygon {
  width: 200px;
  aspect-ratio: 1/1;
  background-color: green;
  float: left;
  shape-outside: polygon(0 0, 53% 0%, 60% 21%, 55% 30%, 61% 39%, 78% 42%, 75% 58%, 50% 64%, 45% 73%, 46% 84%, 55% 90%, 38% 100%, 0% 100%);
  clip-path: polygon(0 0, 53% 0%, 60% 21%, 55% 30%, 61% 39%, 78% 42%, 75% 58%, 50% 64%, 45% 73%, 46% 84%, 55% 90%, 38% 100%, 0% 100%);
}

.image {
  float: left;
  shape-outside: url(../images/drop.png);
}