マルチ型のCSS層非直角CSS層
https://stackoverflow.com/questions/3967668
-
09-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
次の画像のようにCSS層を形作ることは可能ですか...
私たちはこの形状の画像を持つことができ、透明な背景で、私たちはこのように層を形作ることができます...しかし、私はこれらの形のような実際の境界線にCSS層を望んでいません... CSS、jQueryなど... 。
注：「このような形状とは、これらの3つの例だけでなく、定義できる形状を意味します」
解決
HTMLで形状が必要な場合は、SVGを埋め込むか生成する必要があります。あなたは見たいかもしれません ラファエル.
通常のHTMLとCSSは、長方形をレンダリングするだけです。
他のヒント
DOM要素の形状を操作する直接的な方法はありません - すべての要素は長方形です（それらがある場合 display:block;）または彼らのテキストコンテンツによって形作られた（彼らがそうである場合 display:inline;).
HTML DOMは長方形のボックスを中心に展開するため、それを使用してランダムな形状のボックスを取得することはありません。
それはあなたがしようとしていることに正確に依存します。あなたがやりたいことが形状を描画するだけなら、あなたがしたいことと必要なブラウザのサポートに応じて、キャンバス、SVG、またはVMLのいずれかを使用する方が良いでしょう。
CanvasはHTML5テクノロジーであり、基本的にはブラウザに描画パッドを提供し、JavaScriptで引き出すことができます。 2Dピクセルアートを作成およびアニメーション化できます。
SVGとVMLはベクトルグラフィック言語です。彼らはほぼ同じタスクを実行しますが、VMLはインターネットエクスプローラーに固有のものであり、他のほとんどのブラウザーはSVGをサポートしています。 （IE9もSVGをサポートしますが、まだ広く使用されていません）。繰り返しますが、JavaScriptを使用してこれらを使用することができます。クロスブラウザーの方法でそれを行うための最良の方法は、 ラファエル図書館, 、グラフィックを作成するためのAPIを提供し、ブラウザに応じて舞台裏のVMLまたはSVGに翻訳します。
もちろん、形状の外側の透明な領域を備えた形状のボックスの背景グラフィックを使用して、ボックス内の領域のみを使用することもできます。それは本当に多角形の箱ではありませんが、あなたがそれを正しくするならば、それは同じくらい良いように見えるかもしれません。
CSSを使用して本当にやりたい場合は、他のテキスト要素がスムーズに包むボックスを持っているかもしれません。あなたは苦労するでしょう。これらの種類の効果を達成するために使用できるハックはいくつかありますが、それらのどれもあなたが探しているものではありません。
1つのオプションはCSS変換です。これにより、ボックスを回転/スキュー/などが可能にします。ダウンサイドは、ボックスが箱型のままである（ポリゴンなし）、内容物が回転して歪んでいること、ボックスのアウトラインがあるということです。また、ほとんどの場合に動作させることができますが、すべてのブラウザでは機能しない場合があります。
ボーダースタイルをいじくり回すことにより、偽の対角線エッジを備えたボックスを作成することができます。見る http://www.cssplay.co.uk/menu/tree.html 良い例として。しかし、繰り返しますが、それは完璧ではありません。
それ以外は、複数のボックスを作成し、達成しようとしている形状に最も近いマッチを取得するために配置する必要があります。
それが役立つことを願っています。
CSSは、ドキュメントをスタイリングするための言語であり、セマンティック構造を提供しません。エルゴ、「CSS層」または「CSS形状」として知られているものはありません。 HTMLドキュメント内のオブジェクトは、「レイヤー」と誤って呼ばれるDivを含む、他のオブジェクトの前または後ろに表示されるかどうかのインデックスを与えることができ、「レイヤー」の幻想を与えます。
いいえ、任意の形状を持つ可能性のある一般的なHTMLドキュメントにはオブジェクトがありません。標準のボックス形状をハッキングして創造的なことをすることができます。 スラントハック.
あなたが探しているのは新しいもののようなものです キャンバス エレメント HTML5およびそれにつながったSVGなどの他のベクトルグラフィックソリューション。
CSS変換を介して、最近のSafari、Chrome、Firefox、Operaで最初の形状（平行四辺形タイプのこと）を実行できます。
- http://webkit.org/blog/130/css-transforms/
- https://developer.mozilla.org/en/css/using_css_transforms
- （www.opera.comは現在ダウンしていますが、あなたは望んでいます http://www.opera.com/docs/specs/presto26/css/transforms/)
- http://hacks.mozilla.org/2009/06/3d-transforms-isocube/
それとは別に、いいえ。 CSSはすべて長方形です。
