1

非常に単純なマークアップ（）で、角が丸いボタンを表示したいのです<a class="next">Next</a>が、矢印は右向きです（一部のiPhoneアプリの上部にある「戻る」ナビゲーションボタンのように）。これは私がこれまでに持っているものです（ここに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、Chrome18でテストしました。IE9にフィルターのグラデーションが表示されません。Chromeは、矢印をスナッブしたポイントで画面にレンダリングします（おそらく、一部のブラウザーターゲティングでは、そのようなバリエーションを調整できます）。

于 2012-04-03T23:33:46.560 に答える