Как добавить тень для :after блока?

Question

Возникла проблема - нужно добавить тень :after блоку, но при добавления свойства "box-shadow" ничего не происходит. Вот сам блок :after (Выделен красным):

А вот его код:

.teachers::after {
    content: '';
    position: absolute;
    background-color: wheat;
    top: -60px;
    height: 65px;
    width: 72.1875vw;
    left: 0;
    -webkit-clip-path: polygon(0 0, calc(100% - 130px) 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, calc(100% - 130px) 0, 100% 100%, 0% 100%);

    /* Не работает 0_о */
    box-shadow: 7px 0px 64px -24px #0A0C09 !important;
}

Что можно сделать?

Answer 1

Добавьте тень на весь блок, а тень реализуйте через фильтр:

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 248, 209);
}

.box {
  width: 100%;
  height: 30vh;
  background-color: orange;
  position: relative;
  z-index: 0;
  filter: drop-shadow(0 -15px 15px rgba(0, 0, 0, 0.67));
}

.box:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 100%;
right: 60%;
height: 10vh;
background-color: orange;
clip-path: polygon(0 0, calc(80%) 0, 100% 100%, 0% 100%);
}

<div class="box"></div>

БЛОГ НА HUSL

Как добавить тень для :after блока?

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