CSS箭头右侧的圆角矩形“下一步”按钮

Question

我希望非常简单的标记（<a class="next">Next</a>）来显示带圆角的按钮，但是箭头指向右边（如某些iPhone应用程序顶部的＆＃34;后退＆＃34;导航按钮） 。 This is what I have so far (jsfiddle link here)：

a.next {
    padding: 6px 12px;
    border-width: 1px !important;
    border-color: #333 !important;
    background: #5BFF2D; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5BFF2D', endColorstr='#20CA00'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#5BFF2D), to(#20CA00)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #5BFF2D, #20CA00); /* for firefox 3.6+ */ 
    border-radius: 6px 0 0 6px !important;
    border-style: solid none solid solid !important;
}
a.next:after {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-top: 12px solid transparent;
    border-left: 16px solid green;
    border-bottom: 12px solid transparent;
    background: white;
}​

..看起来像这样：

正如您所看到的，它根本不起作用。我现在的想法是：即使我确实正确定位了箭头，它也不会正确地显示背景渐变，更不用说1px边框了。

这样做有干净的方法吗？

Answer 1

原始答案

This gets very close，但没有边框。如果您想在span内添加{{1}}，请the border becomes possible also, as well as some smoothing on the 'faked' gradient。

更新答案

This achieves the gradient整体看起来更好。主要问题是它要求你背后有一个坚实的背景颜色（白色，在这种情况下）。

最终答案

This actually does support the gradient leaving the angles transparent。它只适用于支持CSS3转换的浏览器。我测试了IE9，FF 11，Chrome 18. IE9没有显示你的滤镜渐变。 Chrome在我的屏幕上呈现了一个冷落点箭头（可能有一些浏览器定位，可以调整这些变化）。