1

我正在尝试实现类似于Apple在页脚中处理面包屑的方式：

面包屑示例

我在想 CSS3（边框半径），但那只做圆角。或者是一个简单的 HTML5 功能？

4

3 回答 3

1

您确实可以使用 CSS3 和伪元素来做到这一点。下面使用一个按钮，然后创建两个三角形，一个黑色的下部用作边框，一个灰色的上部用作填充颜色。

jsFiddle

在此处输入图像描述

button {
    padding:0 1em;
    height:30px;
    border:1px solid #000;
    background-color:#DDD;
    position:relative;
}
button:before,
button:after {
    content:"";
    display:block;
    position:absolute;
    left:100%;
}
button:before {
    content:"";
    display:block;
    position:absolute;
    left:100%;
    top:0;
    bottom:0;
    margin-left:1px;
    border-left:6px solid #000;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
}
button:after {
    top:1px;
    border-left:6px solid #DDD;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
    bottom:1px;
}
于 2013-05-13T01:12:05.643 回答
0

这不是一个简单的 HTML5 功能，正如您在问题的评论中已经指出的那样，Apple 使用图像。

如果你真的想要一个 CSS 解决方案，你应该看看这里：http ://cssdeck.com/labs/one-tag-ios-like-buttons 。这是一种仅使用 CSS 创建 iOS 样式按钮的方法，用于 iOS Web 应用程序。它使用旋转的:after伪元素来创建所需的效果。

于 2013-05-13T00:59:58.997 回答
0

互联网上有很多示例，只需查找 css3 面包屑，您就会看到很多教程。

http://css-tricks.com/triangle-breadcrumbs/

你可以用边框来做到这一点，这是一个例子和一个教程

http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation

于 2013-05-13T01:01:42.427 回答