<section class="example">
  <div class="original-image cropped"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<svg height="0" width="0">
  <defs>
    <clipPath id="cropped">
      <path d="
        M 10 300
        L 30 200
        L 25 170
        L 35 160
        L 40 110
        L 25 60
        L 50 10
        H 345
        L 380 55
        L 385 65
        L 370 100
        L 380 160
        L 390 170
        L 380 185
        L 400 300
        H 240
        L 235 215
        C 235,170 172,170 172,215
        L 165 300
        Z
      " />
    </clipPath>
  </defs>
</svg>

:root {
  font-family: sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.example {
  max-width: 600px;
}

.original-image {
  width: 400px;
  height: 300px;

  background-image: url(https://ucarecdn.com/0788ee97-3911-45eb-a55c-f05d32231571/-/crop/100px50p/bottom/-/preview/400x300/);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cropped {
  clip-path: url(#cropped);

  shape-outside: polygon(
    10px 300px,
    30px 200px,
    25px 170px,
    35px 160px,
    40px 110px,
    25px 60px,
    50px 10px,
    345px 10px,
    380px 55px,
    385px 65px,
    370px 100px,
    380px 160px,
    390px 170px,
    380px 185px,
    400px 300px
  );
  shape-margin: 1em;
  float: left;
}