Div with arrow up on top of div and box positioning - css

Question

Hello I am trying to make a popup with dropdown login effect,
but I’m having trouble with how I could get my arrow up on the div
like this:
but i got this:
And I also have trouble positioning my invisible div correctly below my menu
I used position absolute, but is not responsive in mobiles devices etc.
I would like help with the best way to position my element in the right way
 and how I would position my arrow correctly
code:
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>
</>
);
my 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;
}
`;
example:
https://codesandbox.io/s/ecstatic-matsumoto-mgy2q

Answer 1

The issue is basically 2 things. Your positioning, and which border you're using for the arrow effect. So if you change your position to top / right, and allow top to place the pseudo element outside of the box, and swap border-top for border-bottom to flip your arrow, voila. Oh and most of the rest of the properties you have in there are innocuous. Have a great weekend!
Change;
: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;
}
to;
: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;
}