Div со стрелкой вверх в верхней части div и позиционирования коробки

Question

Здравствуйте. Я пытаюсь создать всплывающее окно с эффектом выпадающего входа, но у меня возникают проблемы с тем, как я могу поднять стрелку вверх по div

, например:

но я получил это:

И у меня также возникают проблемы с правильным размещением моего невидимого элемента ниже мое меню

Я использовал абсолютное положение, но не реагирует на мобильные устройства и т. д. c.

Я хотел бы помочь с лучшим способом правильно расположить свой элемент и узнать, как установил бы мою стрелку правильно

код:

export default function App() {
  const [isHover, setisHover] = React.useState(false);
  console.log(isHover);
  return (
    <>
      <LoginColumn>
        <WrapperLogin
          onMouseOver={() => setisHover(true)}
          onMouseOut={() => setisHover(false)}
        >
          <a>
            <FontAwesomeIcon
              className="adjust"
              icon={faUserCircle}
              size="2x"
              fixedWidth
              color="white"
            />
          </a>
          <div>
            <a>
              <h3>Olá !</h3>
              <p>
                Minha Conta
                <span>
                  <FontAwesomeIcon
                    className="adjust"
                    icon={faAngleDown}
                    size="lg"
                    fixedWidth
                    color="white"
                  />
                </span>
              </p>
            </a>
          </div>
        </WrapperLogin>
        <SignWrap hover={isHover}>a</SignWrap>
      </LoginColumn>
    </>
  );

мой css:

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;
  }
`;

пример:

https://codesandbox.io/s/ecstatic-matsumoto-mgy2q

Answer 1

Проблема в основном 2 вещи. Ваше расположение и какую границу вы используете для эффекта стрелки. Так что, если вы измените свою позицию на верхнюю / правую, и разрешите top размещать псевдоэлемент за пределами поля, и поменяйте положение border-top на border-bottom, чтобы перевернуть стрелку, вуаля. Ох, и большинство остальных объектов, которые у вас есть, безобидны. Хороших выходных!

Изменить;

: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;
  }