在twitter引導中更改按鈕的形狀（「arrow-ed」後退按鈕）？

Question

我想知道是否有任何辦法改變的引導按鈕的形狀，讓這樣的事情：

任何提示嗎？

Answer 1

除非您使用圖像和:after僞元素，但您可以通過使用css三角形來接近它，否則不會在按鈕的乳頭尖端獲得圓角邊緣。這裏是簡短的演示我做的，使用一些顏色弄虛作假來接近效果：

CSS

button.btn { 
    position:relative; 
} 

button.btn:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 14px solid transparent; 
    border-bottom: 14px solid transparent; 
    border-right: 14px solid #e2e2e2; 
    position: absolute; 
    top: 50%; 
    margin-top: -14px; 
    right: 98%; 
    z-index: 2; 
} 

button.btn:before { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 14px solid transparent; 
    border-bottom: 14px solid transparent; 
    border-right: 14px solid #A0A0A0; 
    position: absolute; 
    top: 50%; 
    margin-top: -14px; 
    right: 97%; 
    z-index: 1; 
} 

.btn-primary { 
    background: #e2e2e2; /* Old browsers */ 
    background: -moz-linear-gradient(left, #e2e2e2 0%, #d1d1d1 47%, #fefefe 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e2e2e2), color-stop(47%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #e2e2e2 0%,#d1d1d1 47%,#fefefe 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #e2e2e2 0%,#d1d1d1 47%,#fefefe 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #e2e2e2 0%,#d1d1d1 47%,#fefefe 100%); /* IE10+ */ 
    background: linear-gradient(left, #e2e2e2 0%,#d1d1d1 47%,#fefefe 100%); /* W3C */ 
    text-shadow: 0 -1px 0 #fff; 
    color:#777; 
    border: 1px solid #A0A0A0; 
} 

我不包括:hover和:active狀態的風格，所以你可以玩混合一些顏色通過使用Colorzilla梯度發生器。

這裏是什麼樣的按鈕看起來像一個演示：

http://jsfiddle.net/WUn26/