CSS3形狀的自動增加高度，運用漸變塑造

Question

我想獲得這個響應/流體按鈕上的箭頭擴大到按鈕本身的高度，只要文字環繞，並增加了按鈕的高度。

http://jsfiddle.net/7uajH/2/

.navigation li { 
display:inline-block; 
vertical-align:top; 
width:50%; 
margin-right:1.25%;} 

.navigation li:after { 
position: absolute; 
content:""; 
width: 0; 
height: 0; 
border-top: 13px solid transparent; 
border-left: 15px solid #DAB347; 
border-bottom: 13px solid transparent; 
right: -14px; 
top: 0px;} 

想知道，也許做到這一點，最好的辦法是使用圖像，但也許有辦法用CSS來實現這一目標？

另外，我周圍中搜索沒有任何的運氣 - 我想就沒有辦法應用漸變箭頭本身？

Answer 1

您不能RELIABLY應用漸變到「邊界黑客」，因爲它們不是實際的HTML元素。

他們在一些瀏覽器的支持，請參閱：CSS3 Gradient Borders。