Mask image with a triangle at the bottom

Question

I'm trying to figure out how to best mask a div with an angular shape like so--if the top div in this case will be a background image, and both divs would be 100% width:

I've seen lots of tutorials out there on how to mask an image with a circle shape, but none on how you would mask the border of a div like the red area. I know there must be a better way than doing this with bitmaps, but am at a loss.

Would it be best to do this with clip-path or SVG? I'm not all that concerned about older browsers, if the result is that they see the red/blue divs separated with a flat line. The entire red area will be a background image, so if old(er) browsers miss out on that angular border, so be it.