Как сверстать такой блок (фото прилагается)?

Question

[SenakPro]

Подскажите, как правильно сверстать данный блок (не обязательно готовое решение, можете хотя бы указать правильный способ). Пробовал через clip-path, но так как это свойство вырезает изображение, то элементы просто не встают на свои места

Comments

[WapSter]

но так как это свойство вырезает изображение

, что-то новенькое

[xdevelx]

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

Answer 1

[user-agent]

добавьте псевдокласс before с градиентом так:

html
<div class='block'></div>

css

.block {
width: 0; 
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid #D0D4DC;
border-bottom: 50px solid transparent;
}

Answer 2

[Дима Долготер]

псевдоэлемент after