Как изменить отображение части картинки средствами CSS?

Question

[Tarrissarh]

Есть обычная картинка:
Как на CSS сделать ее такой:
Html картинки:
<div><img></div>
Как это реализовать?

Comments

[shmatuan]

Добавить треугольники через :before, :after

[Tarrissarh]

shmatuan, я понял что его надо добавлять через псевдоэлементы, только вот я не знаю как это точно сделать, хотя сейчас нашел решение с использованием svg (из данного ответа). Теперь остался вопрос, насколько данное решение эффективно...или есть еще лучше

Answer 1

[Виталий Першин]

clip-path и calc



Генератор clip-path https://bennettfeely.com/clippy/