Как сделать такую тень для border'a?

Question

[Nikita Shchypylov]

Всем привет
Нужно сделать такой бордер :

Сейчас у меня так :


Не могу понять, как дать тень треугольнику.
По стилям для этого блока :

.missionNavigationDropdown {
    width: 720px;
    padding: 15px;
    box-sizing: border-box;
    height: 340px;
    background: #fff;
    justify-content: space-between;
    z-index: 5;
    border: 1px solid #cfcfcf;
    display: flex;
    margin-top: 15px;
    left: 15px;
    position: absolute;
    box-shadow: 0 0 14px 0 rgba(3,5,7, .35);
}


.missionNavigationDropdown:after {
    display: block;
    content: "";
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    border-top: 1px solid #cfcfcf;
    border-left: 1px solid #cfcfcf;
    position: absolute;
    background: #fff;
    left: 22px;
    top: -9px;
}

Спасибо

Comments

[Ярослав Иванов]

А где боксшэдоу на псевдоэлементе ?

Answer 1

[Антон Спирин]

1. Прямоугольный элемент для решения этой задачи не подойдет. Треугольники через CSS
2. Используйте псевдоэлемент :before цвета тени и разместите его под :after со смещением вверх.

Последний раз решал подобную задачу так:

&:before {
    content: " ";
    position: absolute;
    top: -6px;
    left: 24px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    z-index: 1;
  }
  
  &:after {
    content: " ";
    position: absolute;
    top: -7px;
    left: 24px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(0, 0, 0, 0.25);
  }

Тут :before это белый треугольник, а :after выполняет роль тени.

Answer 2

[Demian Levais]

https://habr.com/post/142534/