<div class="wrapper">
  <div 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. 
  </div>
</div>

<div class="wrapper">
  <div 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. 
  </div>
</div>

<div class="wrapper">
  <div 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. 
  </div>
</div>

<div class="wrapper">
  <div 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. 
  </div>
</div>

<div class="wrapper">
  <div 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. 
  </div>
</div>

<div class="wrapper">
  <div 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. 
  </div>
</div>
.wrapper {
   display:inline-flex;
   border:1px solid;
   margin:5px;
   overflow: hidden;
   width:400px;
}
.box {
   text-align:justify;
   font-size:20px;
}
.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), #fff 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,#fff calc(var(--w)*0.707),transparent 0);
}
.triangle-middle::before {
   --shape:conic-gradient(from 45deg,#fff 90deg, transparent 0) ;
  background-position:center right;
}
.rounded::before {
    --shape:radial-gradient(var(--w) at bottom right, #fff 97%, #0000);
}
.rounded-middle::before {
   --shape:radial-gradient(calc(var(--w)/2)  at right, #fff 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.