How can I create Triangle shape clip mask using CSS

Question

I want to create triangle as shown in image. Does someone know how to achieve the effect?

Answer 1

Imagine the area with photo is split down the middle into two squares, with the photo as a background.

Now imagine you give those squares very thick top and bottom borders with colours corresponding to the areas above and below the photo.

Now imagine you also give them a very thick border for each of their adjacent sides (the left square has a right border, the right square has a left border), but this time, you make the border transparent.

You will see that where the top/bottom borders and the side borders meet, there is a diagonal edge between them where the colour changes to transparent. This leaves a transparent triangle in the adjacent corners where the background shows through.