How to combine CSS Linear gradient with images?

Question

I have on the left a css Gradient, and on the left a slider with images. How can i combine the two, so that the images on the right take the shape like on the images below ?

UPDATE

HTML

<div class="row shape-background">

</div> 

CSS

.shape-background {
text-align: center;
background: -moz-linear-gradient(125deg, #e20613 25%, white 25%);
background: -webkit-linear-gradient(125deg, #e20613 25%, white 25%);
background: -o-linear-gradient(125deg, #e20613 25%, white 25%);
background: -ms-linear-gradient(125deg, #e20613 25%, white 25%);

the problem is that when i add another backgroud image on the righr side of the same div, the linear gradient does not work.

Should i make my slider with img tag, or can i achieve this use case with background images ? background: linear-gradient(125deg, #e20613 25%, white 25%); }

Answer 1

demo from my comment:

body {
  margin: auto;
  height: 200px;
  width: 300px;
  background: linear-gradient(125deg, #e20613 25%, transparent 25%), url(http://dummyimage.com/300x200&text=my_image);
  border:solid;
}
html {
display:flex;
height:100%;
background:white;
}

but this doesn't make a slider.

example of a css slider with image in the HTML