CSS重叠箭头

Question

CSS重叠箭头

9

我正在尝试使用仅CSS3实现与下面图片非常相似的东西。

enter image description here

唯一的区别是最后一个 div 会有一个尖端。

在寻找类似适应的东西时，我发现 this js fiddle 很接近我想做的事情，但引入了两个问题：首先，它是用画布完成的，其次，它强制我为每个箭头有效地绘制两次--一个为 div，一个为下一个箭头之前的空间。必须有更清洁的方法来做到这一点--有人能给我提供一些方向吗？

我需要知道的是如何仅使用 CSS3 构建上图所示的内容--一系列重叠的 div 箭头。

- varatis

对于上述情况，是否可以为每个箭头使用背景图像作为选项？=> | > => | >= 上面的箭头实际上并不重叠。 - Nick Maroulis

@marabutt 我猜他们可能不会 - 在我看来，每个箭头的末端似乎与下一个箭头的尾巴相接。无论哪种情况，我都想要重叠。 - varatis

2个回答

7

以下CSS3解决方案不使用任何图片，易于操作。

我创建了两个完全注释的示例，可以进一步扩展。

一个示例具有相互“可视”堆叠的箭头。

另一个示例与您的问题中的图像完全相同，箭头上有“端点”。

每个示例都有一个简单的jQuery .click()事件监听器，因此您可以看到无论在面包屑的哪里单击，锚点都将接收正确的单击事件。箭头尾部正常工作。 截图显示NavBar的面包屑的活动CSS悬停：

enter image description here

当浏览器禁用CSS时，面包屑导航会优雅地回退以满足辅助功能要求。 参考文献： jsFiddle

- arttronics

如果您需要一个没有CSS3旋转效果的类似Breadcrumb NavBAR，请参考此SO Answer。 - arttronics

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zoltan Toth · Accepted Answer

试一下这个 - http://jsfiddle.net/ksNr3/8/

ul {
    margin: 20px 60px;
}

ul li {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 100px;
    margin: 5px 1px 0 0;
    text-indent: 35px;
    position: relative;
}

ul li:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    left: -2px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #fff;
    z-index: 0;
}

ul li:first-child:before {
    border-color: transparent;
}

ul li a:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -15px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #ccc;
    z-index: 10;
}

ul li.active a {
    background: orange;
    z-index: 100;
}

ul li.active a:after {
    border-left-color: orange;
}

ul li a {
    display: block;
    background: #ccc;
}

ul li a:hover {
    background: pink;
}

ul li a:hover:after {
    border-color: transparent transparent transparent pink; 
}

更新 - 现在它是可点击的并且最小化了重叠区域 - http://jsfiddle.net/ksNr3/8/