有没有办法在HTML中实现6点按钮？

Question

我试图实现类似于Apple在页脚中使用面包屑的方式：

我在考虑CSS3（border-radius），但这只是圆角。或者是一个简单的HTML5功能？

Answer 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;
}

Answer 2

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

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

Answer 3

Theres在互联网上有很多例子，只是寻找css3面包屑，你会看到很多教程。

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

你可以用边框这样做是一个例子和一个教程

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