どのようにCSSの三角形を行います。最も便利な方法は、

非常に多くの美しい近代的なWebページには、多くの魅力的なグラフィックスが含まれています。 これらの中で最も単純なものは、複数の要素を設計するために使用される三角形のような幾何学的形状を使用します。 訪問者が彼に彼の注意を向けに例えば、彼らは、ページ上のオブジェクトへのポインタとして使用されています。 もちろん、三角形の、主な機能 - 装飾、それらを含むブロックとして、より現代的で魅力的になっています。

誰もがカスケーディング・スタイル・シートを通じて、このような図を作成するために、そしてCSSで三角形を作る方法を不思議に思っているか知っています。

サイトのデザインに応用

どこでもWebデザインの三角形で。 彼らは、ヒント、メニュー、さまざまなUI要素を作られています。 時には彼らは、ブートプロセスの指標を作成するために使用されています。 そして、以前ならば、それなしで行うことが可能であったが、今では不可能であり、開発者は、このような要件に適応することが義務付けられています。 結局、今日はCSSの三角形で作成された - インタフェースの部品間の相互接続の構築に重要な部分と単一のエンティティにマージ。

それは非常に頻繁にある三角形のデザインそのレイアウトに来るとき、多くのWebデザイナーは困惑しています。 すべての後に、直接、この幾何学的な数字を作成していない性質。 実際には、これを行うための複数の方法があります。

使用してフレームを生成する方法

国境 - 最初のメソッドを使用すると、CSSで三角形を作成することができます。 彼はフレームを使用しています。 borderプロパティを使用して作成された境界は直接三角形に関連していないという事実にもかかわらず、それは、この目的のために最も頻繁に使用されています。

ゼロ高さとオブジェクトの幅、ならびに厚い境界のインストールを設定するときは、4つの等しい三角形に分割された正方形を、見ることができます。 トリックはあなたが必要なだけの国境を維持する必要があるということであり、それ以外は透明にします。 そして今、それはCSS右方向とカラーで描かれた三角形が判明します。

いずれかの編集を使って絵を描く必要がないので、プロパティ「フレーム」が便利ですを使用して角度を作成します。 三角形のパラメータは、常にコードに変更することができます。 そして、それは時間の開発を節約できます。 フレームの異なる幅を組み合わせることにより、簡単な数字を取得するのに十分です。 それがどのように機能するかを理解するには、単にゼロ幅、高さ、そして非常に厚いフレームそれぞれの側に異なる色で空の要素を作成することができます。 だから、4つの透明の三角形の三辺を作る異なるタイプがあります。

• 三角形は、左に見て、の辺は等しいです。
• 三角形は、左と平らに見ています。
• 細長い三角形は、左を向きます。
• 直角三角形、 その直角に左。
• 下向きに見て三角形。
• 三角形は見上げます。
• 三角形、右、および他の多くの種に見ています。

psevdoedementovを使用して

これらの技術を使用すると、ポップアップの指示やヒントに角度を作成することができます。 ユニットにCSSの三角形を経由して接続するには、ほとんどのプログラマは、このような擬似後と以前のように使用します。 あなたがそれらを一緒に使用している場合、ストロークを持つCSSの三角形で描画することができます。

これらを組み合わせることにより、開発者は、プロパティ適用し、美しいシューティングゲームのさまざまなを作成する相対：位置親要素にします。 これは、擬似ないために自分の席から移動順に行われます。

プラス三角形を作成するためのCSSフレームワークの使用は、以下のとおりです。

• プロパティの助けを借りて、サイズや色を迅速かつ簡単に編集。
• すべてのブラウザをサポートしています。

短所：

• それはフレームを使用しているため、グラデーション、影を適用する可能性はありません。
• ユーザーがFirefoxブラウザのページを見たときに時々、アルファ値が動作しないことがあり、これはイメージが歪みます。

既製の写真を使用して

三角形を作成する以下の方法は、 - 符号化された画像を使用することです。 三角形は、画像エディタに予め引き出され、専門的なサービスと特別なコードに変換されます。

この方法の利点は、あなたが影、グラデーション、およびフレームで非常に美しいデザインを作成してからちょうどそれをすべてエンコードすることができるということです。 しかし、欠点は、誰もがグラフィックスプログラムに堪能であるという事実です。 画像が非常に大きい場合に加えて、コードの行は、単に巨大によって得られます。 これは、開発者にとっては不便です。

ブラウザInternertエクスプローラの古いバージョンの使用価値は別々のアイテム。 それらには、この方法は、単純に動作しません。

メソッドの反転広場

一つの方法は、CSS反転広場の手段を作成することです。 二つの基本的な単位があります。 しかし、一部の人々は、擬似を使用しています。

まず、あなたは、正方形を作成します。 これは、回転体の内容であろう。 それはダイヤモンドのように見えたように、その後、45度で、それを展開。 隠された：次に、シフトアップ及び外部装置は、プロパティオーバーフローによって隠されています。 この溶液はまた、クロスブラウザではなく、所望に応じて時々画像が表示されません。

結果

だから、三角形を作成するための多くの方法があります。 それだけでは、これらすべてのCSSプロパティで迷子にしないのですか？ この場合の基準は常に役立ちます。 これは、カスケードスタイルシートのすべての機能を説明します。

プログラミングに入るとCSS-ガイドを表示したくない人のために、三角形の右サイズと色を生成するオンラインエディタがあります。 では 、ビジュアル・エディタ、 ユーザーが選択し、すべての設定の数値を設定します。 オンザフライで別のウィンドウに配置されたCSSコードジェネレータの三角形に変換します。 その後、生成されたコードは、単にスタイルシートに挿入され、ページのデザインに合うように。