css - 在我的导航中创建指示槽时遇到 css 问题

Question

当我遇到一个小问题时，我一直在建立一个站点并构建基本布局。我想创建一个“缺口”导航，但我不知道这样做的第一件事。

我试图创建一个定位在我的下方（我的想法是我可以[使用 CSS 或使用图像] 创建一个白色三角形），它可以与我创建“缺口”效果的底部对齐。我还没有成功，希望有 css // html 向导状态技能的人能提供帮助。

附言。如果您需要更多信息，请告诉我 - 我对 stackoverflow 有点陌生

Answer 1

让您的 NAV LI 标签和其中的 A 标签一直延伸到内容块的顶部。

如果 LI 是“当前”标签，则在其中放置一个三角形图形作为 A 标签的背景。

li.current a {
    background:url(triangle.png) no-repeat center bottom;
}

您可能希望三角形为蓝色，与内容块顶部的蓝色条相同。

Answer 2

Cappuccino 使用以下 css 来标记链接标签。

<style>
        #navmarker {
        width: 1px;
        height: 0;
        position: relative;
        margin-top: -0.7em;
        margin-left: auto;
        margin-right: auto;
        border-bottom: #FFD48E solid 0.8em;
        border-top: none;
        border-left: transparent solid 0.8em;
        border-right: transparent solid 0.8em;
        }

        div {
            display: block;
        }
    </style>

尝试创建一个 div 并使用上面对我有用的 css。

    <div id="navmarker"></div>