我试图将带有底部边框的菜单更改为带有底部箭头。
例如:http://i.imgur.com/3onjcjV.png
https://css-tricks.com/jquery-magicline-navigation/ ¨
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #fe4902;
}
尝试了以下但它不起作用。
#magic-line {
position: relative;
background: #fff;
border: 1px solid #999;
}
#magic-line:after, #magic-line:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#magic-line:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
#magic-line:before {
border-color: rgba(153, 153, 153, 0);
border-bottom-color: #999;
border-width: 11px;
margin-left: -11px;
}
最佳答案
要添加您正在寻找的箭头,您可以将以下内容添加到您的 css 文件中:
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #fe4902;
overflow:visible !important;
}
#magic-line:after, #magic-line:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#magic-line:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 5px;
margin-left: -5px;
}
#magic-line:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 5px;
margin-left: -5px;
}
本质上,它所做的是在魔术线前后添加一个“元素”,并为它们提供边框,从而在您的元素上创建箭头的外观。
您可以在此处创建适合您的箭头:http://www.cssarrowplease.com/
尝试理解有关其工作原理的 CSS,您可以使箭头看起来完全符合您的要求。
如果在动画过程中箭头没有出现,这似乎发生在对带有伪元素的 css 动画使用硬件加速的浏览器中。解决方法是向包含伪元素的元素添加 overflow: visible !important
。
即:
#magic-line {
overflow:visible !important;
}
关于带有箭头的 jquery magicline,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41429003/