我尝试更改带有底部边框的菜单以使用底部箭头。
例如: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;
}
答案 0 :(得分:1)
要添加与您要查找的箭头类似的箭头,可以将以下内容添加到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;
}