Добавить к clip-path box-shadow

Question

Нужно создать вот такой элемент на css Создал через clip-path: clip-path: polygon(10% 20%, 0 10%, 0 0, 100% 0, 100% 100%, 0 100%, 0 30%);. Начал добавлять box-shadow, но она не появляется. Решил добавить родителю box-shadow, получилось вот . Помогите сделать тень для стрелки этой

.block__wrapper {
  margin: 100px;
  box-shadow: 0px 18px 116px rgba(0, 0, 0, 0.06);
}

.block {
  height: 300px;
  width: 100%;
  background: grey;
  clip-path: polygon(10% 20%, 0 10%, 0 0, 100% 0, 100% 100%, 0 100%, 0 30%);
  position: relative;
}

<div class="block__wrapper">
  <div class="block">
  </div>
</div>

Answer 1

Просто box-shadow в данном случае работать не будет, но вы можете использовать filter: drop-shadow() (подробнее о drop-shadow())

body {
  background: #e5e5e5;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

.block__wrapper {
  filter: drop-shadow(0 0 10px rgba(0,0,0, .25));
}

.block {
  height: 300px;
  width: 100%;
  background: #fff;
  clip-path: polygon(10% 20%, 0 10%, 0 0, 100% 0, 100% 100%, 0 100%, 0 30%);
  position: relative;
}

<div class="block__wrapper">
  <div class="block">
  </div>
</div>

Answer 2

Если нужно выполнить вёрстку с макета pixel perfect, сделать её адаптивной к изменению размеров дисплея, чтобы при этом не менялась форма выреза, как в решении CSS в соседнем ответе, то лучше использовать SVG

body{
background: #E5E5E5;
}
.block {
  height:100vh;
  width: 100vw;
 }
 #arrow {
  filter: drop-shadow( 3px 5px 4px rgba(0, 0, 0, .5));
 }

<div class="block">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 655 295">
  
  <path id="arrow" d="M70.5 32.4v44L92 95.6l-21.6 20.8v140.2h518.8V32.4Z"  fill="white" />
</svg>
</div>

БЛОГ НА HUSL

Добавить к clip-path box-shadow

Ответы (2 шт):