自动增加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;}

另外，我到处搜索都没有任何运气--我猜没有办法对箭头本身应用渐变？

Answer 1

您不能可靠地将渐变应用于“边框黑客”，因为它们不是实际的HTML元素。

在某些浏览器中支持它们，请参阅：CSS3 Gradient Borders。