CSS三角形作成ツール | Chromeアプリ100

詳細・使い方

Webサイトをデザインする時、簡単な図形であれば画像を用意するよりCSSで表現してしまった方が良い場合があります。ですがコーディング・プログラミング初心者にはちょっと難しく感じるかも…。

もし作りたい図形が「三角形」なら、Chromeアプリに助けてもらうという方法があります。「CSS三角形作成ツール」はサイズや色を指定するだけで、簡単に三角形のCSSコードが作れてしまう便利ツールなんです☆

入力項目は4つのみ。
まずは「Direction」で三角形の頂点の位置を8方向から指定します。


次に三角形のタイプを選択。

Equilateral（正三角形）
Isosceles（二等辺三角形）
Scalene（不等辺三角形）

の3種類から選べるので、正三角形などは一辺ごとにカスタマイズする手間が省けます。
ここで三角形の種類を選択すると「Size」で入力する必要のあるサイズの項目が有効に。ここに、作りたい三角形の幅をピクセル数で入力します。


最後に色指定。もちろんRGBで色は作り放題です。


「Type」の項目で「IE6 support(add chroma filter)」にチェックを入れてIE6でも正常に表示されるようにするとCSSコードは少し複雑に。
ですが自動生成されたコードを全選択してコピー＆ペーストすればいいだけなのでとっても簡単です。


IE6ブラウザはサポートが打ち切られているので、今後チェックの必要が無くなっていくと思いますが、色コードの指定など何かと「面倒くさい」作業がChromeアプリで一気に省けました♪
「CSS三角形作成ツール」をより複雑な図形作成の土台として利用するというのも1つの方法。Webデザインに関わっている人にオススメです！