固定サイズのブロック基板の使用から、vmlまたはsvgを使用したコーナーの作成まで、さまざまな方法があります。 このトピックでは、この主題に関する多くの情報があるため、よく知られている方法については検討しません。 さらに別のメソッドを作成してみました。
すぐに予約します。私の方法は万能薬ではなく、いくつかの欠点があります。これらについて詳しく説明します。
簡単に説明します。
理論
角が丸いブロックを作成する必要があるとしましょう。
私の意見では（私は「私の」と言いますが、まだこの方法を満たしていないので、もし正しい場合）、3つのディーバと1つの画像が必要です。
たとえば、簡単な絵を描いてみましょう。
そして彼女のコーナーを呼び出す
その上に4つのコーナーがあり、1つのスプライトで立ち往生しています。
この場合、私は16ピクセルに等しい画像幅を取りました-通常の場合は1emに等しいです。
この値は覚えておく必要があります-1つの「クォンタム」の幅であり、他のすべてのサイズはその倍数であるか、2、3倍に減少するためです-0.5、0.25、0.125 ...
ここで、固定サイズのブロック（たとえば、20emから3em）があるとします。
彼にスタイルを付けると
背景：url（corners.png）繰り返し;
その後、最終的に次の結果が得られます。
次のステップは、この中にコンテナを追加することです。 今のところ、概略を示します：
ご覧のとおり、このコンテナの幅は親の100％（水平および100％-1量）であり、通常は親コンテナの背景と重なります。
同じ方法を使用して、作成したものに別のコンテナーを作成します。
ご覧のとおり、そのようなブロックの高さは親から100％+ 1クォンタムで、幅は100％-1クォンタムです
これがメソッド全体です。
実装
この場合のマークアップ自体は、言われたように見えます-せいぜい3 div
<div class = "panel">
<div class = "h">
<div class = "v"> Hello world、私はリンゴとプラムが好きな美しい男です</ div>
</ div>
</ div>
cssファイルもそれほど複雑ではありません。 この場合のcssはコンテンツの動的な高さ（高さはクォンタムの倍数）であることを考慮する価値がありますが、固定の高さで実行できます
.panel {
位置：相対;
float：左;
幅：19em！重要;
幅：20em; / * IA 6の場合* /
背景：url（corners.png）繰り返し;
パディング：0.5em 1em 0.5em 0！重要;
パディング：0.5em 0; / * IA 6の場合* /
}
.v {
背景：＃0f0;
位置：相対;
float：左;
フォント：1em / 1em Arial、Helvetica、sans-serif normal;
マージン：-0.5em 0;
パディング：0.5em 0;
幅：100％;
}
.h {
背景：＃00f;
位置：相対;
float：左;
幅：100％;
パディング：0 0.5em 0 0.5em;
}
私は思う-すべてが簡単であり、追加の説明は必要ありません。
その結果、優れたbrowsershots.orgサービスから、すべてのブラウザーで同じ結果が得られたことがわかります。これは次のようになります。
短所
この方法の欠点は次のとおりです。
- このメソッドはフローティング幅では使用できません
- borderプロパティを使用するオプションはまだ解決されていません。
- 画像が必要
- 内側と外側のマージンで迷子になることがありますが、レイアウトが単純化されません
- この方法は万能薬ではなく、心の糧にすぎず、それぞれの場合に別々にコンパイルされます
長所
- 3 div-a
- 最小CSS
- JavaScriptなし
プラスよりもマイナスが多いように見えるかもしれませんが、それはあなた次第です。 メッシュ設計を使用する場合、この方法は（私の意見では）うまくいくでしょう。
UPD： デモを見ることができます