角の丸い偽のタブを作成するには？

Question

alistapart - slidingdoorsを読んでも、私は立ち往生しています。 、

問題、あなたは推測しているかもしれ真ん中にある：

は、ここで私が何をしたいのです。にもかかわらず

： は、ここで私は（= DIVを緑色の四角形）のdivの中にタブを（私はそれは醜いですすみませんが、それはこの方法を説明するために高速です）「カット」しました方法ですそれはIE6-7互換性（多くのおかげで、マイクロソフト）はありませんが、ここでは、Firefox、ChromeとOperaの下に与えるものです：

今、私は左の境界線、および権利を終了し、上の丸いコーナーで終了したいです一番下の写真（最初の写真のように）。どのようにすればいいか分かりますか（私の仕事をIE 6と7との互換性を持たせることになる他の人に仕事を提供するつもりであることに留意してください）？私は立ち往生している。

[編集]数時間の検索の後、 "Gaby aka G. Petrioli"（多くの多くの感謝）の助けを借りて、私はをやっていましたが、ほとんどが欲しかったです。

は、ここで私は何を得るのです。

あなたが任意のアイデアを持っている場合は...

Answer 1

これは、タブの右側にCSSと1つの画像で行うことができます。

このデモhttp://jsfiddle.net/uwUwK/3/を見てくださいと赤の要素（クラス.tab-separatorと1）にbackground-imageを追加

---

あなたは、タブの異なる右側で行うことができれば（少ないです細長い）、画像はまったく必要ありません。デモ：http://jsfiddle.net/uwUwK/4/

Answer 2

を、それがあるべき場合：

そして、ここでは、私が取得したいものですIE 6と7との互換性は、画像を使用する唯一の方法です。 1つの大きな背景画像（高さと幅がダイナミックである場合のみ動作します）、または各ボーダーとコーナーの画像セット（背景画像とdivと枠線の繰り返し）を使用します。

しかし、彼らが使っている方法によっては、それはひどくパフォーマンスに影響します。

btw。純粋なcss3を使用している場合、そのようなことを行うためにボーダー半径とボーダーイメージがあります。 （http://www.css3.info/preview/border-image/）