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

Question

我想实现类似于Apple怎么做他们的面包屑在页脚的东西：

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

Answer 1

Theres是在互联网上的很多例子只是寻找css3 breadcrumbs，你会看到很多教程。

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

你可以做到这一点与这里的边界是一个例子，一个教程

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

Answer 2

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

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

Answer 3

您可以用确实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; 
}