Web Service

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

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

[ads_center]

使い方

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

アイコンが追加

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

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

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

日本語設定

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

方向を指定

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

タイプを選択

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

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

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

サンプル

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

関連記事

  1. Web Service

    Chromeで今見ているページをPocketへワンクリックで追加することができる「Pocket (f…

    ChromeでPocketにワンクリックで記事を追加することができる拡…

  2. Web Service

    検索結果を見やすくしてくれるChrome拡張機能「Google検索でキーワードをハイライト表示」

    PCブラウザでChromeをお使いの方に便利な拡張機能のご紹介です。「…

  3. timeanddate.com
  4. placekitten

    Web Service

    Webサイト作成時に可愛い猫のダミー画像を用意してくれる「placekitten」

    とても素敵なWebサービスがあったのでご紹介します。Webサイトを作成…

  5. Web Service

    材料・時間・カロリー指定もできる「Google レシピ検索」

    Google レシピ検索という便利なサービスを試してみました。Goog…

  6. Web Service

    ボタン1つでCSSファイルを軽量化!圧縮や整形が簡単にできる「csCSSc」

    CSSファイルを簡単に圧縮したり整形したりできるツール「csCSSc」…

コメント

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

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

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP