css - 放置在css选择器之后的弹出模式wrt之前的位置，以悬停的元素位置

每当框悬停时，我试图将:: before :: after css选择器定位到弹出模式

可重现的堆叠闪电战

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

css选择器应放置在弹出模式之前或之后，并位于悬停框垂直中心的位置。
因此，箭头应显示为附加在弹出模式上，类似于工具提示

每个语态的模态定位已经如预期的那样，仅需要校正:: before :: after箭头定位。

仅供参考

最佳答案

您可以使用: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类的最大值

Updated StackBlitz Demo

关于css - 放置在css选择器之后的弹出模式wrt之前的位置，以悬停的元素位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58078022/