画像を使わずにCSSで三角形を作る時に便利なサイト「CSS triangle generator」!

2015/05/09

こんにちは。
今回は画像を使わずにCSSで三角形を作る時に便利なサイト「CSS triangle generator」!です。

CSSで三角形を作る時に便利なサイトを見つけたので紹介します。

画像を使わずにCSSで三角形を作る時に便利なサイト「CSS triangle generator」!

CSS triangle generator

css-triangle-generator

http://apps.eky.hk/css-triangle-generator/

 

「CSS triangle generator」の使い方

まずは「Direction」で方向を決めます。

css-triangle-generator2

 

続いて「Type」で三角形のタイプを選択します。
IE6に対応させる場合は「IE6 support (add chroma filter)」にチェックを入れます。

css-triangle-generator3

 

続いて「Size」で三角形のサイズ決めます。

css-triangle-generator4

 

続いて「Color」で三角形の色を決めます。
全て終わったら「Update」のボタンをクリックします。
(「Update」のボタンをクリックしなくても反映されているっぽいけど、念のためクリックしておきましょう!)

css-triangle-generator5

 

あとは右側の「CSS」のCSSをコピーしてサイトにペーストすれば完了です!

css-triangle-generator6

 

後から気づいたのですが、日本語のサイトもあるみたいです。
こっちの方が分かりやすくてよさそうです。

http://apps.eky.hk/css-triangle-generator/ja

 

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

いかがでしたか。CSSで三角形を作る時に便利ですね!
以上で画像を使わずにCSSで三角形を作る時に便利なサイト「CSS triangle generator」!でした。

Related Post

topへ戻る