1

<a class="next">Next</a>我想要非常简单的标记（这是我到目前为止所拥有的（jsfiddle 链接在这里）：

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;
}​

..看起来像这样：

这就是 Chrome 对我的 CSS 的评价

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

有没有一种干净的方法可以做到这一点？

4

1 回答 1

1

原始答案

这变得非常接近，但没有边界。如果你想添加一个span内部，那么边框也成为可能，以及对“假”渐变进行一些平滑。

更新的答案

这实现了渐变，整体看起来更好。主要问题是它要求您在其后面具有纯色背景（在本例中为白色）。

最终答案

这实际上确实支持使角度透明的渐变。它仅适用于支持 CSS3 转换的浏览器。我在 IE9、FF 11、Chrome 18 中进行了测试。IE9 没有显示您的滤镜渐变。Chrome 在我的屏幕上呈现一个指向箭头的冷落点（也许有一些浏览器定位，可以调整这样的变化）。

于 2012-04-03T23:33:46.560 回答