Сложенный угол на изображении тоже с тенью - PullRequest
Новая
       12

Сложенный угол на изображении тоже с тенью

0 голосов
/ 15 января 2020

Я ищу решение (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/

Любая другая идея будет отличной!

1 Ответ

1 голос
/ 15 января 2020

Только что получил. Мне пришлось добавить тень к родителю: 

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>
...