Question

我正在制作一个通过JQuery滑出的登录框，正在使用伪元素在顶部放置一个三角形。我还尝试了用常规方式（使用传统的分隔线）将三角形放置在那里，因此我认为问题出在边框而不是伪元素上。

在幻灯片完成之前，三角形不会出现。

.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建议将溢出设置为visible！important，将内部元素的溢出设置为不可见。这一半有效，但是内部元素的隐藏溢出无效https://codepen.io/cohen-coombe/pen/OJVXOvw

任何指针将不胜感激。

Answer 1

检查我的选项，也许会有用：

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

我添加了填充并将箭头放在该空间中。我在另一个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;
}

jQuery幻灯片期间的伪元素三角形

1 个答案: