Как в css обрезать низ, правую и левую стороны картинки на определенное количество px?

Question

[Kartt]

Есть тег div. Внутри находится картинка (img) и текст.

Нужно через css обрезать низ этой картинки на 10px. Еще нужно обрезать ее правую и левую стороны на 5px (с каждой стороны убрать 5px). Чтобы отрезанные области просто пропали, как их и не было. Не нужно подгонять размеры сторон, резать верх, растягивать/сжимать, как-то центрировать изображение, не нужно заполнять отрезанные области и т. д.

Похожие вопросы/ответы найти удалось, но они не помогли сделать именно так, как говорится выше.

Comments

[lemonlimelike]

border-radius пробовали?

[Kartt]

lemonlimelike, многое пробовал, но это, кажется, нет. Если border-radius точно поможет в такой ситуации, позже найду пример и буду пробовать. В любом случае спасибо.

Answer 1

[ReActor Дмитрий Вершанский]

Вам нужна функция clip-path() в css, с ее помощью в параметрах задаете любой геометрический объект-маску и тем самым происходит вычитание фрагментов

Comments

[Kartt]

К сожалению, разобраться не удалось. Тег/функция, скорее всего, та, которая нужна. Просмотрел много примеров, сделал много попыток, но самое простое (казалось бы) — срезать 3 стороны прямоугольной картинки — так и не сделал. Находил примеры обрезки картинки через «clip» с использованием position: absolute, но так (с position: absolute) вообще контент сайта разваливался (искажался). Или другой выход мне нужен, или этот тег еще ковырять буду, так как на данном этапе мозгов не хватило. Вам — спасибо за ответ.

[ReActor Дмитрий Вершанский]

Kartt, рад стараться)

Answer 2

[Kartt]

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