Как реализовать подобный блок на HTML+CSS?

Question

[Евгений Лавренов]

Реализовать такой треугольник в выпадающем меню не проблема, но там внутри есть картинка, которая обрезается по треугольнику, как такое можно сделать?

Comments

[Сергей delphinpro]

Можно сделать с clip-path и добавить фоллбэк для неподдерживаемых в виде простого треуголника.
А можно полностью кроссбраузерно заюзать svg маску.

[Rustam Bainazarov]

Дополняя ответ выше, с учётом закругления, clip-path навряд ли, а вот маска — да. Только ширина этой штуки должна быть фиксированной, чтобы не было искажения степени закругления.

Хотя я могу не знать метода, как сделать маску адаптивной, а он есть.

Answer 1

[iBird Rose]

Answer 2

[Александр Алексеев]

выделить в ФШ картинку с уголком
сохранить обводку
экспортировать ее в иллюстратор
сохранить в SVG
затем css mask-image
IE в пролете, да и хер с ним

Answer 3

[forspamonly2]

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