@skav's link pointed me in the right direction, although shape-inside seems to be less dependable than shape-outside.
Here is how I tackled this:https://i.sstatic.net/yCNsv.png
You can add a div within your description div and apply an outershape to mimic the skewed image on the right. Keep the background transparent; I used green for visibility.
Additionally, when working with images, using clip-path reduces the amount of code needed.
Organizing your text into p tags increases clarity, and adding within words improves the appearance of justified text.
For HTML:
<div class="skw-page__content">
<div class="triangle"></div>
<h2 class="skw-page__heading">Page 1</h2>
<div class="skw-page__description">
<p>Lorem ipsum dolor sit amet, con­sect­etur adi­pisi­cing elit. Accu­sa­mus ha­rum qui, pla­ceat fugit de­lec­tus ma­xime volupta­tibus perspi­ciatis, quia sit it­aque!</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/img-test.jpg" alt="random nice picture of a montain reflecting ine a blue lake"/>
<p>Qui­bus­dam lib­ero, cupi­di­ta­te aspe­rio­res tem­pora quos porro in­ven­tore? Prae­sen­tium ape­riam dele­ni­ti nam a a­li­quid sequi ea perspi­ciatis error recu­sandae enim, do­lorem quae.</p>
</div>
For CSS:
.skw-page__description {
font-size: 14px;
width: 100%;
hyphens: auto;
text-align: justify;
padding: 0;
}
img{
min-width: 0px;
max-width: 75%;
min-height: 0px;
margin: 2% 0;
clip-path: polygon(0% 0%, 100% 0%, 78% 100%, 0% 100%);
}
.triangle {
width: 300px;
height: 100%;
background-color: transparent;
shape-margin: 0 0 0 2%;
clip-path: polygon(98% 0%, 100% 0%, 100% 100%, 50% 100%);
shape-outside: polygon(95% 0%, 100% 0%, 100% 100%, 50% 100%);
background: green;
float: right;
right: 0;
}
There you have it :)