2015年05月09日

三角形を 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;
       }

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気の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-widthborder-styleborder-color は 1つ〜4つの値を設定することができます。
※値には各プロパティに対応する、値を入れます。 例えば border-color の場合
  • border-color: blue; …1つ (上下左右)blue
  • border-color: red blue; …2つ (上下)red  (左右)blue
  • border-color: green red blue; …3つ (上)green (左右)red (下)blue
  • border-color: brown green red blue; …4つ (上)brown (右)green (下)red (左)blue
※枠線を表示するには、一緒に "枠線のスタイル" border-style を指定しておく事が必要です。

タグ:css 三角形
posted by javaScript at 23:19 | 大阪 ☁ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。