6

Господа, есть блок, который обрезан с помощью 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%);
}
<div class="logo"></div>

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

Air
  • 14,505

4 Answers4

9

Решение SVG

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

<svg width="120" height="120" viewBox="0 0 120 120">
  <polygon id="Shadow" fill="grey" transform="translate(4 4)" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke-width="2" fill="grey"/>
  <polygon id="Logo" fill="dodgerblue" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="grey" stroke-width="2" fill="none"/>
</svg>

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

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

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

<svg width="120" height="120" viewBox="0 0 120 120">
  <defs>
    <filter id="Filtershadow" height="120%" width="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> 
    </filter>
  </defs>  
  <polygon id="Shadow" fill="grey" transform="translate(4 4)" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="none" stroke-width="2" fill="grey" filter="url(#Filtershadow)"/>
  <polygon id="Logo" fill="grey" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="none" stroke-width="2"/>
</svg>

Решение 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%);
}
<div id="box">
  <div id="content"></div>
  <div id="shadow"></div>
</div>
Arthur
  • 4,572
Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
  • второй вариант лучше – Air Oct 24 '17 at 16:29
  • @Air тут три варианта :-) Какой второй? Второй svg с размытием тени или вариант CSS? – Alexandr_TT Oct 24 '17 at 16:43
  • ага))))))))))))))))) – Air Oct 24 '17 at 16:49
  • Это только у меня на втором варианте тень обрезана по краям? Выглядит так-то не очень. Полагаю если нужно размытие то нужен только CSS вариант. – Telion Oct 24 '17 at 17:54
  • @Telion не обрезана тень, а размыта фильтром. У каждого свой вкус. Поэтому я написал в ответе, что можете регулировать, степень размытия, отступы, цвет тени. В svg всё это достаточно просто – Alexandr_TT Oct 24 '17 at 18:23
  • 1
    Нееет, она то размыта, а размытие обрезается, это видно довольно четко на всех углах. (https://www.dropbox.com/s/d06ia1eyhfretc1/%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80.png?dl=0) – Telion Oct 24 '17 at 20:23
  • @Telion молодец! Пригляделся и понял, что ты имеешь ввиду. Упустил из виду, что фильтр по умолчанию имеет диапазон действия 120%, а остальное подрезает, у меня не хватило пространства, чтобы фильтр отрисовался полностью. Подредактировал атрибуты вот так выглядит сейчас подложка, которая обеспечивает тень https://i.stack.imgur.com/zzXfJ.png – Alexandr_TT Oct 24 '17 at 20:52
  • 1
    @Alexandr_T, уже сделал)) по этому коммент убрал... я думал ты не читал еще)) благодарю – Air Oct 25 '17 at 07:29
  • @Air не жадничай :-) покажи людям, как сделал прямо здесь – Alexandr_TT Oct 25 '17 at 07:35
  • @Alexandr_T, ок закончу напишу. Но ответом глупо писать. А коменте реализовать, как то не комильфо ... – Air Oct 25 '17 at 07:40
4

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

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

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

    <mask id="poly"> <polygon id="Logo" fill="white" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="none" /> </mask>

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

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

    <filter id="filtershadow" width="120%" height="120%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> </filter>

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

<svg width="125" height="125" viewBox="0 0 125 125" >
  <defs>
    <filter id="filtershadow" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
    </filter>   
    <mask id="poly">
      <polygon id="Logo" fill="white" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="none" stroke-width="1"/> 
    </mask> 
  </defs>
  <g id="pic"> 
    <polygon id="Logo" transform="translate(4 4)" fill="black" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="none" stroke-width="1" filter="url(#filtershadow)"/> 
    <image x="0" y="0" width="100" height="100"
 xlink:href="http://placeimg.com/100/100/any"
 mask="url(#poly)"/>
  </g> 
</svg>

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

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

Блок отвечающий за отрисовку изображения и размытой тени обертывается тегом группы <g id="pic">..</g>, а затем повторно используется с указанием смещения объекта клона:

<use xlink:href="#pic" x="20" y="20"> </use> 

<svg width="250" height="250" viewBox="0 0 250 250">
  <defs>
    <filter id="filtershadow" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
    </filter>   
    <mask id="poly">
      <polygon id="Logo" fill="white" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="white" stroke-width="4"/> 
    </mask> 
  </defs>
  <g id="pic"> 
    <polygon id="Logo" transform="translate(4 4)" fill="black" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="grey" stroke-width="2" filter="url(#filtershadow)"/> 
    <image x="0" y="0" width="100" height="100" xlink:href="http://placeimg.com/100/100/any"
 mask="url(#poly)"/>
  </g>  
  <use xlink:href="#pic" x="20" y="20"/>
  <use xlink:href="#pic" x="40" y="40"/>
</svg>
Arthur
  • 4,572
Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
  • Супер))))))!!!!! – Air Oct 25 '17 at 19:49
  • 1
    @Air благодарю Мне оч. близок слоган в ваше профиле "ДЕЛАЕШЬ ДЛЯ ДРУГИХ, УЧИШЬ ДЛЯ СЕБЯ"... :-) Непонятно другое, почему действительно интересные работы остаются без должного внимания https://ru.stackoverflow.com/a/734919/28748 – Alexandr_TT Oct 25 '17 at 20:07
  • я кстати этот вопрос из ссылки добавил себе в избранные, но о твоем ответе не получал уведомление... – Air Oct 25 '17 at 20:19
4

Надо обернуть лого в ещё один 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);
}
<div class="wrapper">
  <div class="logo"></div>
</div>
Qwertiy
  • 123,725
  • Это же svg... Вообще из головы вылетело... filter: drop-shadow(10px 10px 15px #00000099); Хорошая идея... – Air May 19 '18 at 22:42
  • Так в коде в вопросе нет svg. Зачем городить svg, если просто css хватает? – Qwertiy May 19 '18 at 22:43
  • Не в коде вопроса... Но clip-path IE не поддерживает.... Вот про svg я и думал... – Air May 19 '18 at 22:47
  • Кстати, что у тя с вопросом Получить пересечение двух путей разобрался? – Air May 19 '18 at 22:49
  • Ничего, забил пока. – Qwertiy May 19 '18 at 22:55
0

Скорее всего, этот вопрос уже не актуален для автора, но думаю такие новички как я наткнутся когда-то на него, и так как для себя я здесь ответа не нашёл, пошёл искать на других ресурсах и нашёл ответ на css.tricks. Вот ссылка на ответ https://css-tricks.com/using-box-shadows-and-clip-path-together/

Решение, как по мне, очень простое. Когда мы используем clip-path, то не можем использовать тень, так как она будет обрезана. Но мы можем откинуть тень от родителя нашого элемента. Но если мы просто добавим ему тень, то она будет иметь форму родителя, для того же чтобы форма тени была такой же, как и того элемента которому она нужна, мы можем использовать даную строку: filter: drop-shadow() с нужными нам параметрами.

1nspir3d
  • 1