Question

我知道我之前已经看过这个，但我正在尝试创建一个带有标记的黑色固定导航栏，该标记是透明的切出三角形。我需要帮助让三角形切口对背景透明，所以当你滚动页面时，你可以看到下面的内容：

我有一个带有javascript的标准列表/锚点导航，可根据页面部分移动.current类：

<div class="navbar">
<ul>
    <li class="current"><a>home</a></li>
    <li><a>products</a></li>
    <li><a>services</a></li>
    <li><a>contact us</a></li>
</ul>
</div>

使用以下CSS设置样式：

.navbar {
    width: 100%;
    position: fixed;
    background: black;
    float: left;
}

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}


a {
    padding: 10px 20px 20px;
}

.current a {
    background: transparent url('../img/wedge-red.png') center bottom no-repeat;            
}

我能想到的唯一方法就是在ul的两侧添加额外的div并为它们指定背景，然后使用带有剪切的透明png作为li的背景。

有没有一种方法可以做到这一点而不会像那样变得非常丑陋，并添加额外的div？

Answer 1

尝试CSS伪元素！

在DOM中的现有元素之前和之后添加2个免费DOM元素。非常适用于您不希望在标记中添加内容以满足样式需求的情况。

CSS加价

.item:before {
    content:"";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: silver;
}
.item:after {
    content:"";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: gray;
}

<强> HTML

<div class="item">Content</div>

检查此JSFiddle以获取演示。

确保您设置内容：“”和显示：阻止以便查看它们。

Answer 2

这就是我最终得到的结果 - 扩展边框并用溢出来裁剪它们：隐藏; （有点hacky，但它可以工作，不会向DOM添加元素）：

    .navbar {
        width: 100%;
        height: 60px;
        position: fixed;
        overflow: hidden;
    }


    ul {
        border-left: solid black 2000px;
        border-right: solid black 2000px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -2000px;
    }

上述内容很适合我的目的，并且在响应环境中行事。

此页面上的另一个答案，使用：before和：after伪元素不能用于我的目的。它最终过于繁琐，伪元素无法正确对齐，并在浏览器窗口调整大小时保持包装到下一行。建议的解决方案适用于固定宽度的元素，而不是原始问题中指定的百分比。

带有切口缺口作为标记的CSS导航

2 个答案: