Поместить селектор css до и после во всплывающем окне модальной позиции в положение элемента

Question

Я пытаюсь расположить селектор :: before :: after css для всплывающего модального окна при каждом перемещении окна

Воспроизводимый стекаблитц

https://stackblitz.com/edit/angular-o389e8?file=src/app/app.component.scss

Селектор css должен располагаться до или после модального всплывающего окна и располагаться вертикально по центру относительно скрытой рамки.Таким образом, стрелка должна отображаться прикрепленной к всплывающему моду, аналогично тому, что мы имеем для всплывающей подсказки

Позиционирование модального слова, скажем, уже соответствует ожидаемому, необходимо только исправить положение :: before :: after.

Только для справки

Answer 1

Вместо использования :before вы можете создать стрелку, используя clip-path

.arrow {
  height: 20px;
  width: 20px;
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
  background: red;
}

<div class="arrow"></div>

Теперь вы можете использовать ElementRef , чтобы получить элемент fs-modal и изменить верхнее значение для .arrow класса

Обновленная демонстрация StackBlitz