有沒有辦法在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; 
}