WEB上で三角形の形状やサイズ、色などを指定しながら、CSSの三角形が簡単に生成できるジェネレータCSS三角形作成ツールのご紹介です。
以前にもCSSで円形、三角形、台形、星形 などを表現する方法のまとめの記事を紹介させていただきましたものの…、コーディングの時間がない時などには、このような作成ツールは本当に役に立ちます。
[CSS]CSSで円形、三角形、台形、星形 などを表現する方法のまとめCSS3のborder-radiusやtransformなどを利用して、CSSだけで円形、三角形、台形、星形などのオブジェクトを表現する方法のまとめです。 円形 #circle { width: 100px; height: 100px; ...webantena.net
CSS三角形作成ツールで三角形を生成する手順
以下のリンクよりCSS三角形作成ツールへアクセスします。CSS三角形作成ツール
作成の流れとしては、
①まずは方向を決めて、
②「正三角形」「二等辺」「不等辺」の中から図形のタイプを選びます。
③後は幅と高度の値を調整し、
④カラーピッカーからお好きな色を選択します。
⑤最後に、ページ下部の「Update」ボタンをクリックすると、
⑥ページ右下の「CSS」欄にコードが出力されますので、コピーしてお使いのCSS ファイルに貼付けます。
このような感じで進めます。②「正三角形」「二等辺」「不等辺」の中から図形のタイプを選びます。
③後は幅と高度の値を調整し、
④カラーピッカーからお好きな色を選択します。
⑤最後に、ページ下部の「Update」ボタンをクリックすると、
⑥ページ右下の「CSS」欄にコードが出力されますので、コピーしてお使いのCSS ファイルに貼付けます。
コメント