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 работает

0

4 ответа 4

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>

10
  • второй вариант лучше
    – Air
    24 окт 2017 в 16:29
  • @Air тут три варианта :-) Какой второй? Второй svg с размытием тени или вариант CSS? 24 окт 2017 в 16:43
  • ага)))))))))))))))))
    – Air
    24 окт 2017 в 16:49
  • 1
    Нееет, она то размыта, а размытие обрезается, это видно довольно четко на всех углах. (dropbox.com/s/d06ia1eyhfretc1/…)
    – Telion
    24 окт 2017 в 20:23
  • 1
    @Alexandr_T, уже сделал)) по этому коммент убрал... я думал ты не читал еще)) благодарю
    – Air
    25 окт 2017 в 7:29
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>

3
  • Супер))))))!!!!!
    – Air
    25 окт 2017 в 19:49
  • 1
    @Air благодарю Мне оч. близок слоган в ваше профиле "ДЕЛАЕШЬ ДЛЯ ДРУГИХ, УЧИШЬ ДЛЯ СЕБЯ"... :-) Непонятно другое, почему действительно интересные работы остаются без должного внимания ru.stackoverflow.com/a/734919/28748 25 окт 2017 в 20:07
  • я кстати этот вопрос из ссылки добавил себе в избранные, но о твоем ответе не получал уведомление...
    – Air
    25 окт 2017 в 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>

5
  • Это же svg... Вообще из головы вылетело... filter: drop-shadow(10px 10px 15px #00000099); Хорошая идея...
    – Air
    19 мая 2018 в 22:42
  • Так в коде в вопросе нет svg. Зачем городить svg, если просто css хватает?
    – Qwertiy
    19 мая 2018 в 22:43
  • Не в коде вопроса... Но clip-path IE не поддерживает.... Вот про svg я и думал...
    – Air
    19 мая 2018 в 22:47
  • Кстати, что у тя с вопросом Получить пересечение двух путей разобрался?
    – Air
    19 мая 2018 в 22:49
  • Ничего, забил пока.
    – Qwertiy
    19 мая 2018 в 22:55
0

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

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

9

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.