5

次の画像のような形のCSSレイヤーを作成することは可能ですか...

代替テキスト

この形状の画像を作成でき、背景が透明な場合は、このような形状のレイヤーを作成できます...しかし、CSSレイヤーをこれらの形状のような実際の境界線に配置する必要はありません... CSS、jQueryなどの方法はありますか... 。

注：「これらのような形状とは、これら3つの例だけでなく、定義できる形状も意味します」

4

4 に答える 4

5

HTMLで図形が必要な場合は、SVGを埋め込むか生成する必要があります。Raphaëlをご覧になることをお勧めします。

通常のHTMLとCSSは長方形をレンダリングするだけです。

于 2010-10-19T11:37:07.410 に答える
3

DOM要素の形状を直接操作する方法はありません。すべての要素は長方形（の場合display:block;）またはテキストコンテンツ（の場合）によって形作られますdisplay:inline;。

HTML DOMは長方形のボックスを中心に展開するため、それを使用してランダムな形状のボックスを取得することはありません。

それはあなたがやろうとしていることによって正確に異なります。図形を描画するだけの場合は、実行する内容と必要なブラウザサポートに応じて、キャンバス、SVG、またはVMLのいずれかを使用することをお勧めします。

CanvasはHTML5テクノロジーであり、基本的にはブラウザーでJavascriptを使用して描画できる描画パッドを提供します。これにより、2Dピクセルアートを作成およびアニメーション化できます。

SVGとVMLはベクターグラフィック言語です。これらはほぼ同じタスクを実行しますが、VMLはInternet Explorerに固有であり、他のほとんどのブラウザーはSVGをサポートしています。（IE9はSVGもサポートしますが、まだ広く使用されていません）。ここでも、Javascriptを使用してこれらを操作できます。クロスブラウザー方式でこれを行う最良の方法は、グラフィックを作成するためのAPIを提供するRaphael librarayを使用し、それを舞台裏でVMLまたはSVGに変換することです。ブラウザによると。

もちろん、ボックスの背景グラフィックを希望の形状にし、形状の外側に透明な領域を作成し、ボックスの内側の領域のみを使用することもできます。実際には多角形のボックスにはなりませんが、正しく実行すれば、同じように見栄えがする可能性があります。

本当にCSSを使用してそれを実行したい場合は、他のテキスト要素がスムーズに折り返されるボックスがあると、苦労することになります。この種の効果を達成するために使用できるハックはいくつかありますが、どれもまさにあなたが探しているものではありません。

1つのオプションはCSS変換です。これにより、ボックスを回転/スキューなどすることができます。欠点は、ボックスがボックスの形をしたままであり（ポリゴンがないため）、コンテンツがボックスの輪郭と同様に回転および傾斜しているため、目的に合わない場合があります。また、ほとんどの場合動作させることができますが、すべてのブラウザで動作するとは限りません。

境界線のスタイルをいじることで、偽の斜めのエッジを持つボックスを作成することができます。良い例については、http：//www.cssplay.co.uk/menu/tree.htmlを参照してください。しかし、繰り返しになりますが、それは完璧ではありません。

それ以外は、複数のボックスを作成して配置し、達成しようとしている形状に最も近いものを取得する必要があります。

お役に立てば幸いです。

于 2010-10-19T12:15:43.103 に答える
2

CSSはドキュメントをスタイリングするための言語であり、セマンティック構造を与えるものではありません。エルゴ、「cssレイヤー」や「cssシェイプ」と呼ばれるものはありません。誤って「レイヤー」と呼ばれることもあるdivを含む、HTMLドキュメント内のオブジェクトには、他のオブジェクトの前または後ろに表示されるかどうかのインデックスを指定して、「レイヤー」のように見せることができます。

いいえ、任意の形状を持つ可能性のある一般的なHTMLドキュメントにはオブジェクトはありません。スラントハックで行われるような、あまり知られていない多くの形状を組み合わせることで、標準のボックス形状をハックして創造的なことを行うことがあります。

あなたが探しているのは、HTML5の新しいcanvas 要素やそれに至るまでのSVGなどの他のベクターグラフィックソリューションのようなものです。

于 2010-10-19T11:33:52.167 に答える
1

最近のSafari、Chrome、Firefox、Operaでは、CSS変換を介して最初の形状（平行四辺形タイプのもの）を実行できます。

それを除けば、違います。CSSはすべて長方形に関するものです。

于 2010-10-19T12:19:34.460 に答える