三角形を CSS で作る

border のプロパティを利用して三角形を作成します。
border は、要素の周囲に枠線（ボーダー）を付ける際に使用します。これを巧く利用して！！

CSS 三角形 作成方法

ブロック要素に
ボーダー幅 (50px) を
設定します。
見易くする為、
色を変えてます。
各ボーダーの端が
斜めに接してます。

ブロック要素の
高さと横幅を
無しにします。
各ボーダーが
三角形に
なりました。

左右のボーダーを100px にしました。
上下は 50px です。

上下のボーダーを
100px にしました。
左右は 50px です。

　上記が三角形を作る流れです。各ボーダー幅 を変更することで色々な大きさや形の三角を生成できます。
そして不必要な border の設定を除外したり、透明にすることで三角形を描写します。
ボーダーの色は transparent で透明になり、親要素の背景色が透過します。

三角形 描画コード

上向き 三角形

#sankaku-Top {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #ff00bb;
       }

右向き 三角形

#sankaku-Right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 100px solid #00ff11;
       }

下向き 三角形

#sankaku-Bottom {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #0055ff;
       }

左向き 三角形

#sankaku-Left {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-right: 100px solid #808000;
       }

上向き 直角三角形

#sankaku-suiTop {
	width: 0;
	height: 0;
	border-bottom: 100px solid #800080;
	border-right: 50px solid transparent;
       }

右向き 直角三角形

#sankaku-suiRight {
	width: 0;
	height: 0;
	border-bottom: 50px solid #800000;
	border-right: 100px solid transparent;
       }

下向き 直角三角形

#sankaku-suiBottom {
	width: 0;
	height: 0;
	border-top: 100px solid #008080;
	border-right: 50px solid transparent;
       }

左向き 直角三角形

#sankaku-suiLeft {
	width: 0;
	height: 0;
	border-top: 50px solid #484012;
	border-left: 100px solid transparent;
       }

★☆★☆★☆　ナウでヤングなレンタルサーバー！ロリポップ！　☆★☆★☆★
月額１０５円〜容量最大１２０ＧＢ！大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』

boder (枠線)のプロパティ

プロパティ	プロパティ値　値の設定
border-width ボーダーの幅	数値+単位（px,em など) 或は キーワード… thin 細線 | medium 中太線 | thick 太線  など
border-style ボーダーの種類	solid 実線 | double 二重線 | dotted 点線 など border-styleプロパティ
border-color ボーダーの色	色の名前、カラーコード 'transparent' で透明になります。
border 四方のボーダーに上記、三つの値 (幅　種類　色）を一括して指定	各値は順不同で半角スペースで区切ります。  border: 5px double #808000; border-top: thin solid red; border-right: thick dotted green; border-bottom: 12px double #00ffff; border-left: medium dashed brown;
border-top｜上ボーダー border-right｜右ボーダー border-bottom｜下ボーダー border-left｜左ボーダー それぞれに（幅　種類　色）を指定

border-width｜border-style｜border-color … 値の設定

border-width｜border-style｜border-color は １つ〜４つの値を設定することができます。
※値には各プロパティに対応する、値を入れます。 例えば border-color の場合

• border-color: blue; …１つ (上下左右)blue
• border-color: red blue; …２つ （上下）red  （左右)blue
• border-color: green red blue; …３つ （上）green （左右）red （下）blue
• border-color: brown green red blue; …４つ （上）brown （右）green （下）red （左）blue

※枠線を表示するには、一緒に "枠線のスタイル" border-style を指定しておく事が必要です。

---

• ★月々100円（税抜）からオンラインショップを運営！
  独自SSL・高機能カート・クレジット決済が簡単導入
• コロリポプラン　詳細はこちら
• WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
• borderプロパティ
• border-styleプロパティ
• paddingプロパティ ボックスの内側の余白
• marginプロパティ
• background 背景に関するプロパティ
• text-align プロパティ
• display プロパティ
• CSS positionプロパティ
• visibilityプロパティ 領域の表示、非表示
• CSS疑似要素 :before / :after
• スタイルシートだけでポップアップメニュー、補足説明文を表示します。
• CSSで作る吹き出しボックス,サンプル
• スタイルシート CSS