Grid row + Diagonal border?

Sure, what I’m trying to achieve is something very similar to this: “More than 100.000…” https://kriesi.at/themes/enfold-2017/
So with a very big image on the right and some text on the left. I figured I’d have to use the grid row element to have the picture look that big.

But then I’d like to have a few of them so that it appears like this: https://kriesi.at/themes/enfold-2017/features/
So one image on the left + text on the right, then one image on the right + text on the left, etc.

And I’d like every other section to have a colored background + a diagonal border so that it looks like this: https://kriesi.at/themes/enfold-one-page-agency/

The thing is that you can only do this with a color section. If I use a grid row I can’t change the color background of the whole section nor do I have the option to make the bottom border a diagonal.

Is there a way to either change the bottom border on a grid row and change the background color or maybe make images inside a color section to appear as big as images on a grid row?