CSS3スタイルの問題

私はタグを作成したが、どのように私は、タグの右側に白い背景を削除することができCSS3スタイルの問題

.tags { 
    list-style: none; 
    margin: 0; 
    overflow: hidden; 
    padding: 0; 
}

右側にある矢印の後に白い背景を持っていますか？このタグの背景はグラデーションスタイルです。

2013-06-30 user270014

これを修正できます。

2013-06-30 16:42:27

私もそうだと思いますが、ここの問題はボタンの勾配です（これはフィドルにはありません）。あなたの答えに加えてあなたが必要とするのは、グラデーションを持つ境界線です。 –

ああ、私はそれを見たことがなかった...私はあなたが国境の色にグラデーションを行うことはできないと思う。代わりに、三角形を反転してマスクとして使用することができます（現在の透明部分を背景色と同じにし、現在の色付きの部分を透明にします）。 –

注：パディング - 元の20pxの代わりにわずか10pxになります（右側の境界線が10pxのサイズなので、オリジナルの20pxに収まるので、オリジナルの外観を得るにはさらに10個必要です） –

:afterのbackgroundを親の背景と一致するように変更します。フィドル：http://jsfiddle.net/eR8Ye/2/

透明にする方法はありません。

2013-06-30 16:30:02 Mooseman

これは機能しますが、親の背景色を知っているインスタンスに制限されています。 –

真ですが、 '：after'の制限です。 CSS変数を使用することもできますが、今はそれらに依存しません。 – Mooseman

@Mooseman：私の場合、背景にグラデーションがあります – user270014

ちょうど右側にある矢印を移動し、そのbackground: transparent

2013-06-30 17:19:41 AnilkaBobo

おかげさまで、この矢印の枠線がFirefoxでは表示されますが、Chromeでは表示されません。この国境をFirefoxからどうやって削除することもできますか？ – user270014

私はかなり理解していません。私にとってそれは両方のブラウザで同じに見える – AnilkaBobo

あなたが得ることができますdesired result 3のステップを行います。

1から::after
2から背景を削除 -
3 -10pxする::afterの位置を変更 - tagクラスから

を右パディングの10pxのを削除する編集

をとあなたの質問のグラデーションの面に関しては、フィーリングを更新して、あなたが持っている問題を正確に示す価値があるかもしれません。 This question hereあなたが必要とする回答を保持することがあります。

2013-06-30 17:29:14 PTD

トムの答えは彼のデザインのパディングと一致しません。私はそうです。 – PTD

thanks..itはFirefoxのこの矢印の枠線を表示しますが、Chromeの枠線は表示しません。この国境をFirefoxからどうやって削除することもできますか？ – user270014

あなたは何を意味するのか分かりません。私はちょうどChrome、Firefox、IEで一見して、彼らは私と同じに見えます。 – PTD

答えて