0

Возникла проблема - нужно добавить тень :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;
}

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

3
  • ни как не добавить, если используешь clip-path
    – Air
    Commented 19 нояб. 2020 в 15:43
  • выйти из ситуации можно только, если добавить другой блок под этим, заблюрить и превратить в тень
    – Air
    Commented 19 нояб. 2020 в 15:45
  • За такие обрывки кода, минусить нужно нещадно.
    – UModeL
    Commented 19 нояб. 2020 в 16:35

1 ответ 1

0

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

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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