Я пытаюсь разработать страницу команды компании, которая использует png-изображение неправильной формы, но должна иметь красную рамку вокруг изображения.

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

Мне дали вот такое изображение: введите описание изображения здесь

Есть ли способ с помощью css / js придать изображению границу, которая остается прямо в области неправильной формы?

Искали везде и всюду, но не смогли найти работоспособного решения.

-1
J.Keefe 18 Дек 2017 в 21:22

1 ответ

Лучший ответ

Вам нужно будет удалить белое неиспользуемое пространство в альфа-канал с помощью редактора изображений и сохранить его как файл .png , после чего вы сможете использовать тени для применения. желаемый эффект. Следующее - просто демонстрация:

img {
  width: 70%;
  filter: drop-shadow(4px 0px 0 red);
}
<img src="https://s7.postimg.org/65lydsb57/a_Ql6e.png">
4
user7207170user7207170 18 Дек 2017 в 18:42