Я хочу создать форму, как на этой картинке:

Я создал треугольную форму, как на этом рисунке, и установил поля в верхнем правом углу, но я не знаю, как сделать так, чтобы он выглядел отделенным от левого элемента, как показано на рисунке.

Должен ли я «обрезать» левый элемент div, чтобы он оставался серой границей и выглядел отделенным от зеленого треугольника?

Есть ли идеи, как это сделать?

РЕДАКТИРОВАТЬ:

Я использую фиксированную панель навигации на странице, поэтому, когда я прокручиваю, если div это позиция: абсолютная, панель навигации идет позади div.пространство между зеленым треугольником и остальной частью div должно быть прозрачным, потому что я использую изображение в качестве фона страницы