图像上的折叠角也有阴影答案

【问题标题】：Folded corner on image with shadow too图像上的折叠角也有阴影
【发布时间】：2020-03-18 07:37:05
【问题描述】：

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

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/

任何其他想法都会很棒！

【问题讨论】：

在IE上放弃吧，它已经过时了，有安全问题。
我会的，但是图像周围的阴影仍然是个问题。

标签： javascript css clip-path

【解决方案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>

【讨论】：