如何创建li标签的选中状态形状

Question

我正在尝试在菜单头中创建一个形状，表示已选择（活动类），但我无法将形状提升并对齐。

这是我尝试过的：

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/ （原文已经是中英混合，此处仅翻译英文部分）

- Severiano

---

尝试使用http://apps.eky.hk/css-triangle-generator/将CSS边框制作成三角形。 - gaynorvader

Answer 1

在边框方面您走对了路。您只需要将其应用到伪元素而不是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;
}

- kthornbloom

Answer 2

你需要使用伪元素：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;
}

- Matt Saunders