在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/