Slanted divs

[tyutghf]

I have a design containing slanted areas. I've done this in the past using pseudo elements before and after, to add the slants on the divs. This worked great when the divs were full colour blocks.

However this time, the divs contain images, so a pseudo element won't clip the image (I have attached an image of what I am trying to create).

I've been playing around with clip-path which is working well for either top or bottom, but I can't figure out whether I can do both top and bottom clips.

[pre].angled-both {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

/*website is wordpress, emulating the block styles*/
.wp-block-media-text {display: grid !important; grid-template-columns: 1fr 1fr; z-index: 1}
.wp-block-media-text figure {margin: 0; z-index: 2}
.wp-block-media-text figure img {display: block}
.wp-block-media-text__content {z-index: 3}
[/pre]

[pre]<div class="wp-block-media-text alignfull has-media-on-the-right angled-both" style="background-color:#68b5cf">
<figure class="wp-block-media-text__media">
<img loading="lazy" width="500" height="500" src="images/drilling.jpg" alt="" class="wp-image-115">
</figure>
<div class="wp-block-media-text__content">
<p style="color:#ffffff" class="has-text-color has-large-font-size">Wordpress Block</p>
<p style="color:#ffffff" class="has-text-color has-medium-font-size">Media and Text</p>
</div>
</div>[/pre]

Can anyone help me achieve this please?

Thanks