<div class="wrapper">
  <p class="box square">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. 
  </p>
</div>

<div class="wrapper">
  <p class="box triangle">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. 
  </p>
</div>

<div class="wrapper">
  <p class="box rounded">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. 
  </p>
</div>

<div class="wrapper">
  <p class="box square-middle">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. 
  </p>
</div>

<div class="wrapper">
  <p class="box triangle-middle">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. 
  </p>
</div>

<div class="wrapper">
  <p class="box rounded-middle">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. 
  </p>
</div>
.wrapper {
  display: inline-flex;
  border: 1px solid;
  margin: 5px;
  overflow: hidden;
  width: 400px;
}
.box {
  text-align: justify;
  font-size: 20px;
  margin: 0;
}
.box::before {
  content: "";
  float: right;
  pointer-events: none; /* to be able to select text */
  height: 100%;
  --w: 100px;
  width: var(--w);
  shape-outside: var(--shape);
  -webkit-mask: var(--shape);
          mask: var(--shape);
  background: url(https://picsum.photos/id/1015/300/300) bottom right/100% auto
    no-repeat;
}
.square::before {
  --shape: linear-gradient(0deg, #fff var(--w), #0000 0);
  background-size: 90% auto; /* we decrease the size a little here to create a gap*/
}
.square-middle::before {
  --shape: linear-gradient( 0deg,#0000 0 calc(50% - var(--w) / 2), #000 0 calc(50% + var(--w) / 2),#0000 0);
  background-size: 90% auto; /* we decrease the size a little here to create a gap*/
  background-position: center right;
}
.triangle::before {
  --shape: linear-gradient(-45deg, #000 calc(var(--w) * 0.707), #0000 0);
}
.triangle-middle::before {
  --shape: conic-gradient(from 45deg, #000 90deg, #0000 0);
  background-position: center right;
}
.rounded::before {
  --shape: radial-gradient(var(--w) at bottom right, #000 97%, #0000);
}
.rounded-middle::before {
  --shape: radial-gradient(calc(var(--w) / 2) at right, #000 97%, #0000);
  background-position: center right;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.