Web Service

CSSで簡単に三角形を作ってくれるChrome拡張機能「CSS三角形作成ツール」

ちょっと面白かったのでご紹介します。Chromeの拡張機能で、CSSで簡単に三角形を作成できるツール「CSS三角形作成ツール」です。その名の通り、サクっと三角形を作ってくれます。出来上がったコードはコピーして使用できます。

[ads_center]

使い方

CSS三角形作成ツールをインストールするとChromeのトップ画面にアイコンが追加されます。

アイコンが追加

アイコンをクリックして、CSS三角形作成ツールのページに行きます。こんな感じの画面になり、ここで三角形を作成できます。

CSS三角形作成ツールにアクセス

初期画面は英語なので、日本語にしたい場合は右上にある「日本語」をクリックします。

日本語設定

最初に三角形の方向を決めます。「上、右上、右、右下、下、左下、左、左上」の中から選択できます。

方向を指定

次にタイプを選択します。「正三角形、二等辺、不等辺」から選べます。ただし、最初の方向で、右上、右下、左下、左上を選択している場合は「二等辺か不等辺」のどちらかになります。

タイプを選択

あとは、好きなサイズや色を設定して、右側にあるコードを取得すればOKです。

サイズや色を選択してコードを取得

シンプルで使いやすいですね。実際に使ってみると、こんな感じで簡単にCSSで三角形を作ることができました。

サンプル

CSSで三角形を作る場合には活用していきたいですね。以下からインストールできます。

ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」前のページ

チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js」次のページ

関連記事

  1. iPhoneデフォルトアプリ「天気」

    Web Service

    iPhoneのデフォルトアプリ「天気」が意外と使いやすかった

    iPhoneにデフォルトで入っているアプリ「天気」が意外と使いやすかっ…

  2. Web Service

    CSS3を使って超カンタンにクールなボタンを作ることができるジェネレーター「Button Maker…

    CSS3を使ってとても簡単にクールなボタンを作ることができるジェネレー…

  3. Minifier

    Web Service

    JS・CSSのコードを圧縮したりデコードしたりできる「Minifier」がとても便利

    MinifierというJSやCSSのコードを圧縮してくれるサービスがと…

  4. Web Service

    ATOK Pad(Mac)を使ってみたら呼び出しも簡単で使いやすかった

    ATOK Pad(Mac)をインストールしてみました。ちょっとしたメモ…

  5. CSS Color Chart

    Web Service

    CSSのカラーネーム、HEX、RGBを1クリックでコピーできるカラーチャート「CSS Color C…

    CSS Color Chartがとても便利だったのでご紹介します。とて…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP