Совместить clip-path и box-shadow

#css #css3 #svg

Господа, есть блок, который обрезан с помощью  clip-path, но при этом  box-shadow
игнорируется... Как можно решить данную проблему?  В итоге, надо данному блоку, приведенному
в примере задать тень?



.logo {
  top: 1px;
  left: 1px;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 120px;
  background: gray;
  margin-left: 10px;
  box-shadow: 10px 10px 15px #00000099;
  clip-path: polygon(0 0, 100% 0, 100% 83%, 70% 100%, 0 100%);
}





P.S. Если clip-path закоментировать,  box-shadow работает
    

Ответы

Ответ 1

Решение SVG

Самое простая реализация тени, как  предложил в комментариях splash58(см. переход
по ссылке) использовать два одинаковых контура. Нижний контур сдвигается вправо и вниз
и выступает в роли тени. 
То же самое, но намного проще можно сделать посредством svg. 








Настраиваете по своему вкусу отступы и цвет тени  transform="translate(4 4)" и fill="grey"  

Вариант с размытием тени

Для размытия тени применен фильтр гаусса 








Решение CSS

Немного доработан пример по ссылке  splash58  



#box {
  position: relative;
  width: 100px;
  height: 120px;
  top: 1px;
  left: 1px;
  margin-left: 10px;
}

#content {
  width: 100%;
  height: 100%;
  background: #3CF;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 83%, 70% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 83%, 70% 100%, 0 100%);
}

#shadow {
  position: absolute;
  z-index: -1;
  content: "";
  background: rgba(0, 0, 0, .5);
  width: 100px;
  height: 120px;
  left: 5px;
  top: 5px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 83%, 70% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 83%, 70% 100%, 0 100%);
}

  

  




Ответ 2

Добавление тени к растровой картинке средствами svg   

Вопрос появился в комментариях, я счёл, что ответ на него будет полезен и оформляю
отдельным ответом. Тем более, что тут будет несколько иная техника реализации.  


Для обрезания изображения используется маска. Для придания формы
маске используется полигон.


  
    


Чтобы маска стала прозрачной она закрашивается в белый цвет fill="white"
 Для полупрозрачной маски  fill="grey",  полностью непрозрачно - fill="black"     


Для тени применяется тот же полигон со смещением, и  размытием краев
фильтром Гаусса.      


   
   


ниже полный код: 








Несколько изображений с тенью   

Применяется приём повторного использования с командой   

Блок отвечающий за отрисовку изображения и размытой тени обертывается тегом группы
.., а затем повторно используется с указанием смещения объекта клона: 

    






Ответ 3

Надо обернуть лого в ещё один div и применить тень к нему. Также подозреваю, что
стоит box-shadow заменить на filter: drop-shadow(...):



.logo {
  top: 1px;
  left: 1px;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 120px;
  background: gray;
  margin-left: 10px;
  clip-path: polygon(0 0, 100% 0, 100% 83%, 70% 100%, 0 100%);
}

.wrapper {
  filter: drop-shadow(10px 10px 15px #00000099);
}