Eu quero criar formas como nesta foto:

Eu criei uma forma de triângulo como nesta foto, e defini as margens para estar no ângulo superior direito, mas eu não sei como fazê-lo parecer dividido a partir da div esquerda como mostrado na imagem.

Eu tenho que "cortar" a div esquerda para permanecer na borda cinza e parecer dividida do triângulo verde?

Existe alguma ideia de como fazer isso?

EDITAR:

Estou usando a barra de navegação fixa na página, por isso, quando eu rolar se div é posição: absoluto, barra de navegação vai atrás div.espaço entre o triângulo verde e o resto do div deve ser transparente, porque eu estou usando a imagem como plano de fundo da página