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

我想要非常简单的标记（

：

…看起来是这样的：


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

有没有一种干净的方法可以做到这一点？
原始答案
，但没有边框。如果要在内部添加
span
，则

最新答案
主要的问题是，它要求你有一个坚实的背景色（在本例中为白色）

最终答案
。它只在支持CSS3转换的浏览器中工作。我在IE9、FF 11、Chrome 18中进行了测试。IE9没有显示您的过滤器渐变。Chrome在我的屏幕上渲染时会将缓冲点指向箭头（可能有一些浏览器目标，类似的变化可以调整）。
原始答案
，但没有边框。如果要在内部添加
span
，则

最新答案
主要的问题是，它要求你有一个坚实的背景色（在本例中为白色）

最终答案
。它只在支持CSS3转换的浏览器中工作。我在IE9、FF 11、Chrome 18中进行了测试。IE9没有显示您的过滤器渐变。Chrome在我的屏幕上渲染时会将缓冲点指向箭头（可能有一些浏览器目标，类似的变化可以调整）.
只要是边框，你就无法将fradiant放在背景上。要制作1px边框，你必须在该元素上使用另一个进行渐变的元素。你最好使用图像精灵和滑动框技术。你就无法将fradiant放在背景上，只要它是s是一个边框。要制作1px边框，您必须在该元素的顶部使用另一个元素进行渐变。最好使用一个图像精灵，并使用滑动框技术。@cambraca--是的，如果您没有渐变（或中间只有一个双色脊线）它看起来会更好。这是令人印象深刻的，我的思想被吹到了仙女座：我能请你试着从你的大脑中挤出丢失的那一小块吗？（我的背景不是纯色：（）@坎布拉卡——我必须让它在我的脑海中慢慢酝酿。问题是，我用纯色来覆盖渐变按钮，我真的想不出如何在角落和渐变处获得透明度。@坎布拉卡——我做到了（这是我的最终答案……已经花了太长时间）。它在现代浏览器上的工作方式与您所希望的一样。渲染过程中的一些细微变化很烦人。您太棒了，非常感谢您在这方面花费了这么多时间。如果我愿意，我会给您打10分could@cambraca--是的，如果没有渐变（或者中间只有一个双色脊线）它看起来会更好。这是令人印象深刻的，我的思想被吹到了仙女座：我能请你试着从你的大脑中挤出丢失的那一小块吗？（我的背景不是纯色：（）@坎布拉卡——我必须让它在我的脑海中慢慢酝酿。问题是，我用纯色来覆盖渐变按钮，我真的想不出如何在角落和渐变处获得透明度。@坎布拉卡——我做到了（这是我的最终答案……已经花了太长时间）。它在现代浏览器上的工作方式与您所希望的一样。渲染方面的一些细微变化令人讨厌。您太棒了，非常感谢您在这方面花费了这么多时间。如果可以的话，我会给您打10分
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;
}​