Css Div顶部带有向上箭头的Div和box定位

您好，我正在尝试创建一个具有下拉登录效果的弹出窗口， 但我不知道怎么才能把箭射向div

像这样：

但我明白了：

而且，我也无法将我的隐形div正确定位在菜单下方

我使用绝对位置，但在移动设备等中不响应

我希望能以最佳方式帮助您以正确的方式定位我的元素 以及如何正确地定位我的箭头

代码：

例如：

---

这个问题基本上有两个方面。您的位置，以及箭头效果使用的边框。因此，如果您将位置更改为“上/右”，并允许“上”将伪元素放置在框外，然后将“上边框”替换为“下边框”，以翻转箭头，瞧。哦，你在那里的其他大部分财产都是无害的。祝你周末愉快

变化

:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 15px solid #000;
    transform: rotate();
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
  }

到

---

什么是无害财产？最好的办法是什么？@MykonSpt像我一样把它们拿走。他们只是没有必要，对你的目标什么都不做。：）我知道您可以帮助我如何将svg图标定位在与箭头相同的位置？更重要的是，您当前的父级为40%，因此顶部箭头的位置将不一致。如果您将布局更改为您知道可靠距离的位置，则只需使用相同的距离来放置弹出箭头。然而，这将需要一些重构，我不知道您的所有要求。也许可以修补一下，看看你是否能找到适合你的东西。：）基本上，我使用的是显示器：flex，我会把它放在一边，集中精力在这个div中使用绝对位置吗？

import styled from "@emotion/styled";
export const SignWrap = styled.div`
  display: ${props => (props.hover ? "block" : "none")};
  background: green;
  position: absolute;
  width: 100%;
  height: 250px;
  top: 100px;
  :before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 15px solid #000;
    transform: rotate();
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
  }
`;
export const LoginColumn = styled.div`
  position: relative;
  width: 40%;
  display: flex;
  flex-direction: column;
  background: red;
`;
export const WrapperLogin = styled.div`
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  :hover {
  }
  svg {
    margin-right: 10px;
  }
  div {
    display: flex;
    flex-direction: column;
  }
  h3 {
    color: white;
    font-family: Roboto;
    margin-bottom: 5px;
  }
  p {
    color: white;
    font-family: Roboto;
    font-size: 0.8em;
  }
`;

:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 15px solid #000;
    transform: rotate();
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
  }

    :before {
       content: "";
       display: block;
       position: absolute;
       right: 1rem;
       top: -15px;
       border-bottom: 15px solid #000;
       border-left: 15px solid transparent;
       border-right: 15px solid transparent;
  }