html - 我可以将框阴影自定义为图像后面的三 Angular 形吗？

Question

我正在尝试自定义一个框阴影，使其形状像图像后面的三 Angular 形。像这样:

但我不知道是否有办法使用盒子阴影来做到这一点。

到目前为止，这是我的代码。

#image{
      width: 200px;
      box-shadow: -10px 10px  #ff9900;
        }

<img src="https://placeimg.com/200/180/any" id="image" />

Answer 1

一个带有渐变的简单边框就可以做到，而且它会响应:

#image {
  border: 10px solid transparent;
  border-image: linear-gradient(to bottom left, transparent 60%, #ff9900 60.5%) 10;
}

<img src="https://placeimg.com/180/150/any" id="image" />
<img src="https://placeimg.com/250/150/any" id="image" />

几乎相同，但有背景:

.box{
  width:200px;
  height:150px;
  padding:10px; /*control the space*/
  background: 
    url(https://placeimg.com/180/150/any) center/cover content-box,
    linear-gradient(to bottom left, transparent 60%, #ff9900 60.5%);
}

<div class="box"></div>