Создание тени, не падающей на div

#css

Всем привет! Я новичок и я пытаюсь создать вот такую вот тень для фотографий: 

А получается, к сожалению вот так и самостоятельно решить эту проблему у меня не
получается:


Т.е. тень верхней фотографии падает на нижнюю, а этого не должно быть. 

К каждой фотографии применяю display:block; position:absolute; и z-index:число;
    

Ответы

Ответ 1

Как вариант решения данной проблемы, могу посоветовать следующий код (в данном случае
вам необходимо тень делать у контейнера, содержащего элементы):



.container {
  filter: url(drop-shadow.svg#drop-shadow);
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .5));
}

.element {
  position: relative;
  width: 150px;
  height: 150px;
}

.element__one {
  background-color: lightgreen;
}

.element__two {
  top: -70px;
  left: 40px;
  background-color: lightblue;
}

.element__three {
  top: -140px;
  left: 80px;
  background-color: pink;
}

  

  

  






Подробнее про идею для решения данной проблемы можно почитать в книге Леа Веру: Секреты
CSS в главе 16 "Падающие тени неправильной формы". 

Если коротко, то в данном решении используются фильтр SVG, и упрощенный аналог на
CSS, и если не поддерживается одно свойство, то будет применено другое.

Про фильтры подробнее можно прочитать тут и тут.


Ответ 2

такой пример:



* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

img {
  max-width: 100%;
  width: 100%;
}

.wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.box,
.shadow{
  width: 300px;
  height: 450px;
  position: absolute;
  left: 200px; 
  transform: rotate(-30deg) skew(25deg, 5deg) scale(1,1);  
}

.box-1,
.shadow-1{
  z-index: 1;
  top: 160px;
}

.box-2,
.shadow-2{
  z-index: 2;
  top: 80px;
}

.box-3,
.shadow-3 {
  z-index: 3;
  top: 0px;
}

.shadow {
  z-index: -1;
  box-shadow: -20px 20px 15px 0px rgba(0,0,0,0.72);
}