0

我知道我以前在某个地方见过这个，但我正在尝试创建一个黑色固定导航栏，其标记是透明的切出三角形。我需要帮助使三角形切口对背景透明，因此当您滚动页面时，您可以看到下面的内容：

我有一个带有 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 a的背景。

有没有办法做到这一点而不会变得像那样丑陋并添加额外的div？

4

2 回答 2

0

试试 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以获取演示。

确保设置content: ""和display:block以便查看它们。

于 2013-01-24T00:03:02.440 回答
0

这就是我最终得到的结果——扩展边界并用溢出裁剪它们：隐藏；（有点 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 伪元素不适用于我的目的。它最终过于繁琐，伪元素无法正确对齐，并且在调整浏览器窗口大小时一直换行到下一行。建议的解决方案适用于固定宽度的元素，而不是原始问题中指定的百分比。

于 2013-01-25T21:30:45.160 回答