Home » Jquery » html – Psuedo-Element Triangle During JQuery Slide

html – Psuedo-Element Triangle During JQuery Slide

Posted by: admin February 22, 2020 Leave a comment

Questions:

I’m making a login box which slides out via JQuery, I’m using a pseudo-element to position a triangle on top. I’ve also tried placing the triangle there the normal way (with a traditional divider), so I assume the issue is with the border and not the pseudo-element.

The triangle does not appear until the slide is complete.

.mobiles-login {
    z-index: 10;
    display: none;
    position: absolute;
    right: 89px;
    top: 112px;
    width: 300px;
    margin: 16px auto;
    font-size: 16px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.mobiles-login:after {
    content: " ";
    position: absolute;
    right: 30px;
    top: -15px;
    border-top: none;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid #656565;
}

https://codepen.io/cohen-coombe/pen/MWweEVB

CSS arrow hides during jQuery slideUp or slideDown animation suggests setting overflow to visible !important, with an inner element with the overflow to invisible. This half worked, however the inner element’s hidden overflow has no effect https://codepen.io/cohen-coombe/pen/OJVXOvw

Any pointers would be much appreciated.

How to&Answer:

Check my option, maybe it will be useful:

https://codepen.io/roman-seredenko/pen/poJbpKR

I have added padding and put the arrow in that space. The shadow I have put in an additional div.

.mobiles-login {
    z-index: 10;
    display: none;
    position: absolute;
    right: 89px;
    top: 112px;
    width: 300px;
    margin: 0px auto;
  padding: 15px;
    font-size: 16px;

}
.mobiles-login-inner { box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); }
.mobiles-login:after {
    content: " ";
    position: absolute;
    right: 30px;
    top: 0px;
    border-top: none;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid #656565;
}