Как сверстать такой элемент?

Question

[z_u_q]

Как сделать так, чтобы часть была цветом, а часть картинкой? Есть ли примеры?

Answer 1

[Вадим Кот]

Самый простой пример

Comments

[z_u_q]

Спасибо!

Answer 2

[Александр]

Например так:
Клик

Answer 3

[0xD34F]

<div>
  <img>
</div>

div {
  background: red;
  display: inline-block;
}
img {
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

https://jsfiddle.net/xsyorh92/

Answer 4

[Дмитрий]

Пример

Answer 5

[profesor08]

css clip path
svg mask