我正在尝试在菜单标题中创建一个形状,表示已选中(活动类),但我无法将形状调整并对齐。
这就是我尝试过的:
HTML
<li class="active"><a href="#">Market</a></li>
CSS
.active {
z-index: -1;
position: absolute;
border-bottom: 2px solid #b6ff00;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
预期结果:
JSFIDDLE:http://jsfiddle.net/Q2Dra/
答案 0 :(得分:7)
你在边境的正确轨道上。您只需将其应用于伪元素而不是li。
完整示例: http://jsfiddle.net/Q2Dra/4/
相关守则:
.active:after {
content:'';
border:10px solid transparent;
border-bottom:10px solid #b6ff00;
position:absolute;
bottom:0;
left:50%;
margin-left:-10px;
}
答案 1 :(得分:1)
您需要使用伪元素:http://jsfiddle.net/webbymatt/QL7Qr/
HTML
<a href="">Home</a>
CSS
a {
position: relative;
background: red;
padding: 6px 10px;
}
a:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content: " ";
position: absolute;
bottom: 0;
left: 50%;
margin-left: -5px;
}