You'll need to use multiple background images - one for the image, and a linear gradient for the solid colour.
Using multiple backgrounds | MDN[
^]
For example:
Edit fiddle - JSFiddle[
^]
.fancy-image {
box-sizing: border-box;
width: 800px;
height: 300px;
background: linear-gradient(115deg, rgba(68,68,68,0) 0%,rgba(68,68,68,0) 45%,rgba(68,68,68,1) 45%,rgba(68,68,68,1) 100%), url(https://placekitten.com/800/300) top left no-repeat;
color: white;
padding: 80px 15px 0 390px;
}
If you want the text to follow the slanted edge, then you'll need to use a CSS shape.
Take A New Look At CSS Shapes — Smashing Magazine[
^]
For example:
Edit fiddle - JSFiddle[
^]
.fancy-image {
box-sizing: border-box;
width: 800px;
height: 300px;
background: linear-gradient(115deg, rgba(68,68,68,0) 0%,rgba(68,68,68,0) 45%,rgba(68,68,68,1) 45%,rgba(68,68,68,1) 100%), url(https://placekitten.com/800/300) top left no-repeat;
color: white;
}
.fancy-image::before {
content: "";
display: block;
float: left;
width: 100%;
height: 100%;
shape-outside: linear-gradient(115deg, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,0) 100%);
shape-margin: 5px;
}