javascript - 图像上的折叠 Angular 也有阴影

Question

我正在寻找一种解决方案(js、css)来在图像上创建折 Angular 。跨浏览器支持会很棒。

body {
  background: #f7f7f7;
}

.img-cont {
  position: relative;
  display: inline-block;
}

img {
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 100%, 0 0);
  box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.15);
  display: block;
  height: auto;
}

.img-cont::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border: 10px white solid;
  border-bottom-color: transparent;
  border-left-color: transparent;
  box-shadow: 4px -4px 5px rgba(0, 0, 0, 0.15);
  transform: rotate(-90deg);
  z-index: 2;
}

<div class="img-cont">
  <img src="https://placeimg.com/640/640/any?t=1579077274644" width="400" />
</div>

不幸的是IE不支持它，但最大的问题是图像周围的阴影不可见。

https://jsfiddle.net/3548yhnx/

任何其他想法都会很棒!

Answer 1

刚收到。我必须将阴影添加到父级:

body {
  background: #f7f7f7;
}

.img-cont {
  position: relative;
  display: inline-block;
  filter: drop-shadow(-5px 5px 10px rgba(0,0,0,.2));
}

img {
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 100%, 0 0);
   display: block;
   height: auto;
}

.img-cont::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border: 10px white solid;
  border-bottom-color: transparent;
  border-left-color: transparent;
  box-shadow: 4px -4px 5px rgba(0, 0, 0, 0.15);
  transform: rotate(-90deg);
  z-index: 2;
}

<div class="img-cont">
  <img src="https://placeimg.com/640/640/any?t=1579077274644" width="400" />
</div>