CSSは三角形、CSSのレンダリング中空三角形、CSSのリアライズの矢印を描きます

ワン❀リード

二日少ないプロジェクト作業するので、引退を表示するには、すべての後に、来年新しい計画があり、より多くの日が含ま記事に関するGitHubの面の質問に座ります。一つの問題は、CSSに含まれている CSSで三角形を作成するには、との原則を概説しました。もちろん、私のために三角形を描くことは困難ではない、との原則を概説しましたか？私は、彼らは国境を通じてそれを行うことができます知っているのに、私は突然、この記事で、この資料の冒頭にそうこの質問を保持し、設定なぜボーダーがそれを達成することができ、瞬間を驚かせました。

II❀CSSは三角形を描きます

国境の1.異なる理解

学生は日を包含する毎朝のようにそれとCSSスタイルフレームボーダー取引を書き、それが長方形の形状を記述するべきであるならば通常の腸は常に、細いラインのボーダーのように、私の心にあったように、当時Garganの。

< のdiv クラス= "国境" > </ DIV >

.border { 
    幅：は50px。
    高さ：は50px ; 
    ボーダー：2ピクセル固体 ; 
    ボーダーカラー：＃96ceb4 #ffeead＃d9534f＃ffad60。
}

たとえば、この場合には、私の意見では、それは4広いと正方形に200pxの2ピクセルの高長方形の色のパッチワークと異なっています。今、私たちは国境より大きく、レビューの下ではほとんどの曲を設定します：

.border { 
    幅：は50px。
    高さ：は50px ; 
    ボーダー：は50px固体 ; 
    ボーダーカラー：＃96ceb4 #ffeead＃d9534f＃ffad60。
}

ボーダーは十分な広さである場合には、この応答は、私たちが生活の中で見てきた画像フレームの境界線のように来て、それが作られた4つの台形のパッチワークです。白の中心領域は、今は要素の幅と高さを取り除くだろう、要素の幅と高さです。

.border { 
    幅：0。
    高さ：0 ; 
    ボーダー：は50px固体 ; 
    ボーダーカラー：＃96ceb4 #ffeead＃d9534f＃ffad60。
}

だから今何色三角形あなたはそれをしたいですか？例えば、私はレッド中国にしたい、それはあなたが赤い角のあるトリプル・スピード（アップステムに）を取得するように、左右の境界線の色は、透明に設定されているになります。

.border { 
    幅：0。
    高さ：0 ; 
    ボーダー：は50px固体 ; 
    ボーダーカラー：透明透明＃1 d9534f。
}

もちろん、我々はトップの色を見ることができないが、これは、完璧ではない、まだ強迫性障害のために、本当に不快な、高さの部分を占めている、我々は、境界線の高さを取り除きます。

.border { 
    幅：0。
    高さ：0 ; 
    ボーダースタイル：固体 ; 
    ボーダー幅：0は50pxは50px ; 
    ボーダーカラー：透明透明＃1 d9534f。
}

中空の三角形を描く3.CSS（フレームのみ）

だから今、私たちはちょうど私が国境で境界線を追加することはできませんので、最初にすべての三角形の自体は、境界線によって実現され、どのようにそれを行うには国境白三角を描きたい、最も直接的な方法は、小さな三角形がアップ位置付ける再作成することです。

あなたはこのような何かを見ることができ、ここで私が擬似クラスを使用し、小さな三角形を定義します。

.border { 
    幅：0。
    高さ：0 ; 
    ボーダースタイル：固体 ; 
    ボーダー幅：0は50pxは50px ; 
    ボーダーカラー：透明透明＃1 d9534f。
    位置：相対 ; 
} 
.border：後 { 
    内容：'' 。
    ボーダースタイル：固体 ; 
    ボーダー幅：0 40ピクセル40ピクセル。
    ボーダーカラー：透明透明＃96ceb4。
    位置：絶対 ; 
    トップ：0 ; 
    左：0 ; 
}

三角形の上に小さな三角形が正確に大きな三角形の中央部に合わせ、左大小の三角形を揃えている見ることができます。これは、擬似クラス参照オブジェクトの位置要素のコンテンツ領域は、我々は他の3つの三角形の前に非表示にしていなかったものではありませんので、三角形状の4つのセンターは、親要素です。

微調整ポジショニングに簡単なので、あなたは効果がこのなり見ることができます：

.border：後 { 
    内容：'' 。
    ボーダースタイル：固体 ; 
    ボーダー幅：0 40ピクセル40ピクセル。
    ボーダーカラー：透明透明＃96ceb4。
    位置：絶対 ; 
    トップ：計6Px。
    左：-40px ; 
}

最後に、私たちは小さな白い三角形の境界線の色を置き換えます、そして国境のみ中空三角形が生まれました。

矢印を実装4.

矢印は、このような私たちの位置決め三角形セット、シンプルなポジショニング、と同じ大きさの三角形の前に、より良い発言を達成します：

そして、背景色を白に変更します。

それは矢のように見えます、前にもちろん、私たちは、疑似クラスでも、直線を追加することができます。

合計3❀

そこでここでは、我々はCSSの境界線の実践を通して三角形を達成するために導入するだけでなく、唯一の国境オープン三角形を描画するための小さな三角測量モードの使用を説明し、今後の作業でのイベントならば、最終的にも、矢印を作成する方法について説明していますそのようなAの需要に、もちろん、それはまた、簡単に解決することができ、その後、この記事では、ここでご紹介します。

参照

三角形を描画するCSS方法-border

[CSS] 6日目には、CSSで三角形を作成し、原則は概説します

CSSは三角形、CSSのレンダリング中空三角形、CSSのリアライズの矢印を描きます

おすすめ