为不规则形状的图像添加边框

Question

我正在尝试开发一个公司的团队页面，该页面使用不规则形状的png图像，但需要在图像周围有红色边框。

成品需要如下所示：

我得到的图像是这样的：

有没有办法使用 css/js 为图像提供一个边框，使其保持在不规则形状区域的右侧？

到处搜索但找不到可行的解决方案。

Answer 1

您需要使用图像编辑器删除 alpha 通道的白色未使用空间并将其保存为.png文件，然后您可以使用投影来应用所需的效果。下面只是一个演示：

img {
  width: 70%;
  filter: drop-shadow(4px 0px 0 red);
}

<img src="https://s7.postimg.org/65lydsb57/a_Ql6e.png">