次を使用して、このリボン効果を動的に作成しようとしていますh1:
私はこれらの2つの画像を持っています:
h1私の目標は、これらをタグの両端に貼り付け、display: inline;プロパティを使用して動的な幅を追加することです。これを実行してクロスブラウザで動作させる「正しい方法」はありますか?
私のテスト目的では、リボンの端は高さ 40 ピクセル、幅 18 ピクセルです。影についてどうするかはまだわかりませんが、これを機能させる方法を理解するのを手伝っていただければ、見栄えを良くすることができます. （うまくいけば）
明確にするために、これまでに持っている（機能していない）cssを次に示します。
h1 {
display: inline;
height: 40px;
background-image: url(images/ribbon/left.png), url(images/ribbon/right.png);
background-position: left, right;
padding: 0 18x;
background-color: #ECECEC;
}
上記の css により#ECECEC、リボンの端の後ろで色がにじみます。何か案は？
更新:
役立つ場合は、現在の css が私にもたらしているもののスクリーン ショットを次に示します。これは、結果を見やすくするために少しセンセーショナルです。の代わりに赤い背景を追加しました#ECECEC。
